jQuery_效果(淡入淡出)

1、jQuery fadeIn() 方法( 用于淡入已隐藏的元素。)

语法:

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

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<script type="text/javascript">

    $(function(){

        $("button").click(function(){

            $("#div1").fadeIn();

            $("#div2").fadeIn("slow");

            $("#div3").fadeIn(3000);

          });

    });

</script>

</head>

<body>

    <button>点击这里,使三个矩形淡入</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>

 

 

 

2、jQuery fadeOut() 方法(用于淡出可见元素

语法:

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

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<script type="text/javascript">

    $(function(){

        $("button").click(function(){

            $("#div1").fadeOut();

            $("#div2").fadeOut("slow");

            $("#div3").fadeOut(3000);

          });

    });

</script>

</head>

<body>

    <button>点击这里,使三个矩形淡出</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>

 

 

 

 

3、jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

语法:$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<script type="text/javascript">

    $(function(){

        $("button").click(function(){

            $("#div1").fadeToggle();

            $("#div2").fadeToggle("slow");

            $("#div3").fadeToggle(3000);

          });

    });

</script>

</head>

<body>

    <button>点击这里,使三个矩形淡入淡出</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>

 

 

 

 

4、jQuery fadeTo() 方法(允许渐变为给定的不透明度(值介于 0 与 1 之间)

语法:$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。

可选的 callback 参数是该函数完成后所执行的函数名称。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<script type="text/javascript">

    $(function(){

        $("button").click(function(){

            $("#div1").fadeTo("slow",0.1);

            $("#div2").fadeTo("slow",0.5);

            $("#div3").fadeTo("slow",0.9);

          });

    });

</script>

</head>

<body>

    <button>点击这里,使三个矩形淡出</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>

 

 

你可能感兴趣的:(jquery)