解释一下 jQuery 中淡入淡出效果的概念？

jQuery 中的淡入淡出效果可以使用不同的方法创建，例如fadeIn()、fadeOut()、fadeToggle() 和fadeTo()。这些方法可用于在 jQuery 中使用不同的参数创建不同的淡入淡出效果。

• 淡入（）：该方法用于使元素以淡入淡出的效果隐藏。

  句法：

  $('selector').fadeIn(speed, callback_function);

• 淡出（）：此方法用于使元素可见并带有淡入淡出效果隐藏。

  句法：

  $('selector').fadeOut(speed, callback_function);

• fadeToggle（）：这个方法用于淡入（）和淡出（）随衰落效应的方法之间进行切换。

  句法：

  $('selector').fadeToggle(speed, callback_function);

• 淡入淡出（）：此方法用于将可见元素淡化到参考1的参数中给出的一定程度的不透明度。

  句法：

  $('selector').fadeTo(speed, opacity, callback_function);

下面的示例详细说明了少量淡入淡出效果的概念。

示例 1：以下代码显示图像在淡入 () 和淡出 () 方法之间切换。

HTML

  

    
    
    
  
    
    
    
  
    
        body {
            text-align: center;
        }
  
        h1 {
            color: #006600;
        }
          
        button {
            color: white;
            background-color: #006600;
            width: auto;
            height: 30px;
        }
    

  

    GeeksforGeeks
  
    FADE TOGGLE
    
  
    
    
    
  
    
        $(document).ready(function() {
            $('#btnfadeToggle').click(function() {
                $('#img1').fadeToggle('slow');
            });
        });
    

  

输出：

实施例2：下面的代码显示吨他fadeTo（）jQuery中方法，其被用于改变所选择的元件的不透明度。

HTML

  

    
    
    
  
    
    
    
  
    
        h1 {
            color: #006600;
        }
          
        button {
            color: white;
            background-color: #006600;
            width: auto;
            height: 30px;
        }
          
        body {
            text-align: center;
        }
    

  

    GeeksforGeeks
  
    FADE TO
    
  
    
    
    
  
    
        $(document).ready(function() {
            $('#btnfadeTo').click(function() {
                $('#img1').fadeTo('slow', 0.4);
            });
        });
    

  

输出：