jQuery第四节---jQuery效果2_在fadeln()和fadeout()两种效果切换的方法-CSDN博客

本文链接：https://blog.csdn.net/GXing007/article/details/78779228

jQuery fadeToggle()方法

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

如果元素已经淡出，则fadeToggle()会向元素添加淡入效果！

如果元素已经淡入，则fade Toggle()会向元素添加淡出效果！

语法：

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fadeToggle</title>
    <script src="http://www.w3school.com.cn/jquery/jquery.js"></script>
</head>
<body>
    <div id="diva" style="width: 700px;height: 600px; border: 1px dashed gray; margin: 50px auto; position: relative;">
        <button style=" position:absolute;bottom: 200px; margin-left: 280px;">奥运来啦</button>
        <div id="div1" style=" width: 190px; height: 190px; border-radius: 100px; border: 5px solid blue; text-align: center;line-height: 190px; position: absolute;left: 0;top: 0;"><b>北京</b></div>
        <div id="div2" style=" width: 190px; height: 190px; border-radius: 100px; border: 5px solid black;text-align: center;line-height: 190px; position: absolute;left: 220px;top: 0;"><b>欢迎</b></div>
        <div id="div3" style=" width: 190px; height: 190px; border-radius: 100px; border: 5px solid red;text-align: center;line-height: 190px; position: absolute;left: 440px;top: 0;"><b>您 !</b></div>
        <div id="div4" style=" width: 190px; height: 190px; border-radius: 100px; border: 5px solid yellow;text-align: center;line-height: 190px; position: absolute;left: 110px;top: 100px;"><i><b>welcome to</b></b><i></i></div>
        <div id="div5" style=" width: 190px; height: 190px; border-radius: 100px; border: 5px solid green;text-align: center;line-height: 190px; position: absolute;left: 330px;top:100px;"><i><b>BeiJing！</b></i></div>
    </div>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#div1").fadeToggle();
                $("#div2").fadeToggle("slow");
                $("#div3").fadeToggle(3000);
                $("#div4").fadeToggle(4000);
                $("#div5").fadeToggle(5000);
            });
        });
    </script>
</body>
</html>

jQuery效果fadeTo()方法

fadeTo()方法逐渐将不透明度改为指定的值！

$(selector).fadeTo(speed,opacity,callback); opacity规定要淡入淡出的透明度！

jQuery效果slideDown()

slideDown通过使用滑动效果，显示隐藏的被选元素

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

如果元素已经是完全可见，则该效果不产生任何变化，除非规定了 callback 函数。

注释：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）

jQuery效果slideToggle()

语法：

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

slideToggle方法通过使用滑动效果(高度变化)来切换元素的可见状态！

jQuery效果toggle()方法切换元素的可见状态

jQuery效果stop()方法

jQuery stop()方法用于在动画或者效果完成之前对他们进行停止

$(selector).stop(stopAll,goToEnd);

stopAll:可选，规定是否将被选元素的所有加入队列的动画停止！

goToEnd:可选，规定是否允许完成当前的动画，该参数是否只能在设置了stopAll参数时使用！

jQuery效果animate()方法动画

语法：

$(selector).animate({params}，speed，callback)；

必须的params参数定义形成动画的css属性

可选的speed参数定义效果的时长，它可以取以下值“slow”，“fast”，或者是毫秒！

可选的callback函数是动画执行完了之后所执行的函数名称！

注意：

animate方法几乎可以操作所有的css属性，但是使用animate的时候必须使用Camel标记书法所写的属性名，eg：比如是paddingLeft而不是padding-left，比如是marginLeft

而并不是margin-left，另外jquery animate()使用相对值，需要在前面加上+=或者-=

jQuery可以使用预设的值设置为height：‘slow’，，，，‘hide’，，，‘toggle’

jQuery功能使用队列方法

默认的jquery提供针对动画的队列功能：这意味着在此之后编辑的多个annimate调用，jquery会创建包含这些方法调用的“内部”队列，然后逐一运行这些animate调用

如果希望在彼此之后执行不同的动画效果，那我们要利用队列！

jQuery效果stop()用法

stop()方法，停止当前正在运行的动画

语法:$(selector).stop(stopAll,goToEnd)

stopAll规定是否停止被选元素的所有加入队列的动画!

goToEnd规定是否允许完成当前的动画,该参数只有在设置了stopAll的时候起作用

stop(true)停止被选元素的所有加入队列的动画

stop(true,true)停止被选元素的所有加入队列的动画但允许完成当前动画！

jQuery Callback函数

jQuery Callback函数在当前动画100%完成后执行

jQuery动画的问题会产生

由于javascript语句(指令)是逐一执行的-按照次序，动画之后的语句可能会产生错误或者是页面冲突，因为动画还没有完成，为了避免这个情况你可以以参数的形式添加Callback

函数

jQuery Callback函数

当动画100%完成后，即调用callback函数$(selector).hide(speed,callback);

$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

jQuery chaining()方法

通过jQuery,您可以把动作方法链接起来。Chaining允许我们在一条语句中允许多个jQuery方法(在相同的元素上)!

jQuery方法链接

有一种名为链接(chaining)的技术，允许我们在相同的元素上运行多条jquery命令，一条接一条

$("#p1").css("color","red").slideUp(2000).slideDown(2000);