什么是 jQuery 淡化效果？

在本文中，我们将探讨 jQuery 中的淡入淡出效果。淡化基本上适用于某些元素的不透明度。在 jQuery 中，我们可以根据不透明度淡入和淡出元素。在 jQuery 中，我们有几种方法可以帮助我们实现淡化效果。我们将通过适当的示例寻找每种方法。

褪色方法：

jQuery fadeIn() 方法： 借助这个方法，我们可以淡入一个基本上隐藏在网页上的元素。

句法：

$(selector).fadeIn(, 
    , );

例子：

HTML

  

    
    
    
  
    
        body {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
  
        .main {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgb(41, 41, 41);
            flex-direction: column;
            height: 100vh;
        }
  
        h1 {
            color: white;
            display: none;
        }
  
        #fadein {
            position: absolute;
            top: 550px;
            height: 50px;
            width: 130px;
            background-color: rgb(0, 141, 19);
            outline: none;
            border: none;
            border-radius: 60px;
            color: black;
            font-size: 1rem;
            font-weight: bold;
        }
    

  

    
        Fade In
        Text in now visible
    
  
    
    
  
        // Initially text is invisible.
        $("#fadein").click(function () {
            $("#text").fadeIn(2000, function () {
                alert("Animation is completed");
            });
        });
    

  

输出：

淡入示例

jQuery fadeOut() 方法：这个方法与fadeIn()方法正好相反，它会使元素不可见。

句法：

$(selector).fadeOut(, 
    , );

例子：

HTML

  

    
    
    
  
    
        body {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
  
        .main {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgb(41, 41, 41);
            flex-direction: column;
            height: 100vh;
        }
  
        h1 {
            color: white;
        }
  
        #fadeout {
            position: absolute;
            top: 550px;
            height: 50px;
            width: 130px;
            background-color: rgb(0, 141, 19);
            outline: none;
            border: none;
            border-radius: 60px;
            color: black;
            font-size: 1rem;
            font-weight: bold;
        }
    

  

    
        Fade Out
        Click button to hide text.
    
  
    
    
        $("#fadeout").click(function () {
            $("#text").fadeOut(2000, function () {
                alert("Animation is completed");
            });
        });
    

  

淡出的例子

jQuery fadeToggle() 方法： 此方法将在单击一次按钮时在fadeIn()和fadeOut()方法之间切换。

句法：

$(selector).fadeToggle(, 
    , );

例子：

HTML

  

    
    
    
  
    
        body {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
  
        .main {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgb(41, 41, 41);
            flex-direction: column;
            height: 100vh;
        }
  
        h1 {
            color: white;
            display: none;
        }
  
        .Toggle {
            position: absolute;
            top: 550px;
            height: 50px;
            width: 130px;
            background-color: rgb(0, 141, 19);
            border-radius: 60px;
            border: none;
            color: black;
            font-size: 1rem;
            font-weight: bold;
        }
  
        .Toggle:hover {
            background-color: rgb(1, 122, 17);
        }
    

  

    
        Fade Toggle
        Text in now visible
    
    
    
        $(".Toggle").click(function () {
            $("#text").fadeToggle("fast");
        });
    

  

输出：

jQuery fadeTo() 方法：在这个方法中，默认不会让元素淡出，实际上，我们会传入想要的不透明度值来淡入或淡出。

句法：

$(selector).fadeTo(, , 
        , );

示例：在此示例中，我们将一个元素淡出为三个不同的值。

HTML

  

    
    
    
  
    
        body {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
  
        .main {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgb(41, 41, 41);
            flex-direction: row;
            height: 100vh;
        }
  
        #text2 {
            margin: 170px;
            color: white;
        }
  
        h1 {
            color: white;
        }
  
        #fadeto1 {
            position: absolute;
            top: 550px;
            left: 500px;
            height: 50px;
            width: 130px;
            background-color: rgb(0, 141, 19);
            outline: none;
            border: none;
            border-radius: 60px;
            color: black;
            font-size: 1rem;
            font-weight: bold;
        }
  
        #fadeto2 {
            position: absolute;
            top: 550px;
            height: 50px;
            width: 130px;
            background-color: rgb(0, 141, 19);
            outline: none;
            border: none;
            border-radius: 60px;
            color: black;
            font-size: 1rem;
            font-weight: bold;
        }
  
        #fadeto3 {
            position: absolute;
            top: 550px;
            right: 500px;
            height: 50px;
            width: 130px;
            background-color: rgb(0, 141, 19);
            outline: none;
            border: none;
            border-radius: 60px;
            color: black;
            font-size: 1rem;
            font-weight: bold;
        }
    

  

    
        Fade To 0.5 opacity
        Fade To 0.2 opacity
        Fade To 0 opacity
  
        GeeksforGeeks
        GeeksforGeeks
        GeeksforGeeks
    
  
    
    
        $("#fadeto1").click(function () {
            $("#text1").fadeTo("slow", 0.5);
        });
  
        $("#fadeto2").click(function () {
            $("#text2").fadeTo("slow", 0.2);
        });
  
        $("#fadeto3").click(function () {
            $("#text3").fadeTo("slow", 0);
        });
    

  

输出：

淡入淡出示例