jQuery fade in and fade out

With jQuery, you can achieve the fade effect of elements.

jQuery Fading method

With jQuery, you can achieve the fading effect of elements.

jQuery has the following four fade methods:

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

##jQuery fadeIn() method

jQuery fadeIn() is used to fade in hidden elements.

Syntax:

$(selector).fadeIn(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast" or milliseconds. .

The optional callback parameter is the name of the function to be executed after fading is completed.

The following example demonstrates the fadeIn() method with different parameters:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#div1").fadeIn();
                $("#div2").fadeIn("slow");
                $("#div3").fadeIn(3000);
            });
        });
    </script>
</head>
<body>
<p>以下實(shí)例演示了 fadeIn() 使用了不同參數(shù)的效果。</p>
<button>點(diǎn)擊淡入 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

Run the program to try it

jQuery fadeOut( ) Method

jQuery fadeOut() method is used to fade out visible elements.

Syntax:

$(selector).fadeOut(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is the name of the function executed after fading is completed.

The following example demonstrates the fadeOut() method with different parameters:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#div1").fadeOut();
                $("#div2").fadeOut("slow");
                $("#div3").fadeOut(3000);
            });
        });
    </script>
</head>
<body>
<p>以下實(shí)例演示了 fadeOut() 使用了不同參數(shù)的效果。</p>
<button>點(diǎn)擊淡出 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>

Run the program to try it

##jQuery fadeToggle( ) method

jQuery fadeToggle() method can switch between fadeIn() and fadeOut() methods.

If the element is already faded out, fadeToggle() will add a fade-in effect to the element.

If the element is already faded in, fadeToggle() will add a fade out effect to the element.

Syntax:

$(selector).fadeToggle(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is the name of the function executed after fading is completed.

The following example demonstrates the fadeToggle() method with different parameters:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文網(wǎng)(php.cn)</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#div1").fadeToggle();
                $("#div2").fadeToggle("slow");
                $("#div3").fadeToggle(3000);
            });
        });
    </script>
</head>
<body>
<p>實(shí)例演示了 fadeToggle() 使用了不同的 speed(速度) 參數(shù)。</p>
<button>點(diǎn)擊淡入/淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>

Run the program to try it

##jQuery fadeTo( ) Method

#jQuery fadeTo() method allows a gradient to a given opacity (a value between 0 and 1).

Syntax:

$(selector).fadeTo(speed,opacity,callback);

Required speed parameter Specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The required opacity parameter in the fadeTo() method sets the fade effect to the given opacity (a value between 0 and 1).

The optional callback parameter is the name of the function to be executed after the function is completed.

The following example demonstrates the fadeTo() method with different parameters:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
  });
});
</script>
</head>
<body>
<p>演示 fadeTo() 使用不同參數(shù)</p>
<button>點(diǎn)我讓顏色變淡</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>

Run the program to try it

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PHP中文網(wǎng)(php.cn)</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); }); </script> </head> <body> <p>實(shí)例演示了 fadeToggle() 使用了不同的 speed(速度) 參數(shù)。</p> <button>點(diǎn)擊淡入/淡出</button> <br><br> <div id="div1" style="width:80px;height:80px;background-color:red;"></div> <br> <div id="div2" style="width:80px;height:80px;background-color:green;"></div> <br> <div id="div3" style="width:80px;height:80px;background-color:blue;"></div> </body> </html>

submit Reset Code

Automatic operation