jQuery的基本动画知识点总结

最新推荐文章于 2020-07-29 18:25:28 发布

yezi__626

最新推荐文章于 2020-07-29 18:25:28 发布

阅读量233

点赞数

本文链接：https://blog.csdn.net/yezi__6/article/details/82760614

版权

1.隐藏元素: hide()
例如：$("p").hide()
2.设置隐藏的参数
语法：$(selector).hide(speed,callback);
speed可选参数:slow,fast
callback可选的参数，规定隐藏之后所执行的函数名称
3.设置元素显示show
语法：$("p").show()
参数个数和规则与hide相同
4.状态切换toggle
语法：$(selector).togale(speed,callback)
speed可选参数:slow,fast
callback可选的参数，规定toggle执行结束之后所执行的函数名称
5.淡入淡出效果
1）淡入隐藏元素 fadeIn
语法：$(selector).fadeIn(speed,callback);
speed可选参数:slow,fast
callback可选的参数，规定fadeIn执行结束之后所执行的函数名称
2)淡出可见元素fadeOut
$(selector).fadeOut(speed,callback);
speed可选参数:slow,fast
callback可选的参数，规定fadeOut执行结束之后所执行的函数名称
3)切换淡入淡出元素
$(selector).fadeToggle(speed,callback);
speed可选参数:slow,fast
callback可选的参数，规定fadeToggle执行结束之后所执行的函数名称
4)淡入淡出元素至指定数值
$("selector").fadeTo(speed,opacity,callback)
speed可选参数:slow,fast
opacity:必选项，0—1之间的值
callback可选的参数，规定fadeTo执行结束之后所执行的函数名称
6.滑动效果
1）滑动显示匹配的元素
$(selector).slideDown(speed,callback);
speed可选参数:slow,fast
callback可选的参数，规定slideDown执行结束之后所执行的函数名称
2)滑动隐藏匹配的元素
$(selector).slideUp(speed,callback);
speed可选参数:slow,fast
callback可选的参数，规定slideUp执行结束之后所执行的函数名称
3)通过高度的变化动态切换元素的可见性
$(selector).slideToggle(speed,callback)
7.创建自定义的动画化效果
$(selector).animate({params},speed,callback);
注意：使用animate让某个区域位置改变，必须将position设置为absolute
params定义形成动画的css属性
8.停止动画

$(selector).stop(stopAll,goToEnd)

stop(stopAll,goToEnd) 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
当stop中有一个参数true
"停止所有" 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。
当stop中有两个参数true
"停止但要完成" 会立即完成当前活动的动画，然后停下来。

下面的例子是动画停止执行：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.js"></script>
    <script>
        $(function(){
            $("#show").click(function(){
                var div=$("div")
                div.slideDown("100000000000")
            });
            $("#stop").click(function(){
                var div =$("div");
                div.stop()
            })

        })
    </script>
    <style>
        .b{
            display: none;
            background-color: salmon;
            width: 200px;
            height: 100px;

        }
    </style>
</head>
<body>
<button id="show">切换 </button>
<button id="stop">停止</button>
<div class="b"></div>
</body>
</html>

yezi__626

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的基本动画知识点总结

1.隐藏元素: hide()例如：$("p").hide()2.设置隐藏的参数语法：$(selector).hide(speed,callback);speed可选参数:slow,fastcallback可选的参数，规定隐藏之后所执行的函数名称3.设置元素显示show语法：$("p").show()参数个数和规则与hide相同4.状态切换toggle语法：$(selector)...
复制链接

扫一扫