jQuery--停止动画和判断是否处于动画状态stop()

最新推荐文章于 2020-01-20 11:03:03 发布

weixin_34023863

最新推荐文章于 2020-01-20 11:03:03 发布

阅读量177

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/halai/p/6899141.html

版权

stop()--语法结构stop（[clearQueue],[gotoEnd]）。

clearQueue和gotoEnd都是可选参数，为Boolean（true或者false）

1、直接使用stop(),会立即停止当前正在进行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #panel{
            position: relative;
            width: 100px;
            height: 100px;
            border:1px solid black;
            background: red;
            cursor: pointer;
            opacity: 0.5;
        }
    </style>
    <script type="text/javascript" src='jquery-3.2.1.min.js'></script>
    <script type="text/javascript">
        $(function(){
            $('#panel').hover(function(){
                $(this).stop().animate({height:'150px',width:'300px'},2000);
            },function(){
                $(this).stop().animate({height:'22px',width:'60px'},3000);
            });
        });
    </script>
</head>
<body>
    <div id="panel"></div>
</body>
</html>

如果遇到组合事件，将执行下面的动画，而非光标移出事件中的动画

$(function(){
            $('#panel').hover(function(){
                $(this).stop()
                .animate({height:'150px'},2000)//如果在此时触发了光标移出事件，将执行下面的动画，而非光标移出事件中的动画
                .animate({width:'300px'},3000);
            },function(){
                $(this).stop()
                .animate({height:'22px'},3000)
                .animate({width:'60px'},2000);
            });
});

要跳出鼠标移入触发的事件，需要给stop传递一个参数 true

$(function(){
            $('#panel').hover(function(){
                $(this).stop(true)
                .animate({height:'150px'},2000)//如果在此时触发了光标移出事件，直接跳过后面的动画队列，执行光标移出事件中的动画
                .animate({width:'300px'},3000);
            },function(){
                $(this).stop(true)
                .animate({height:'22px'},3000)
                .animate({width:'60px'},2000);
            });
});

第二个参数（gotoEnd）用于正在执行的动画直接达到结束是的状态

$(function(){
            $('#panel').hover(function(){
                $(this).stop(true,true)
                .animate({height:'150px'},2000)//如果在此时触发了光标移出事件，立刻执行完此次动画并且跳过后面的动画队列，执行光标移出事件中的动画
                .animate({width:'300px'},3000);
            },function(){
                $(this).stop(true,true)
                .animate({height:'22px'},3000)
                .animate({width:'60px'},2000);
            });
});

2、判断元素是否处于动画状态

if(!$(element).is(':animated')){  //判断元素是否正处于动画状态
                //如果当前没有进行动画，则添加新动画
}

转载于:https://www.cnblogs.com/halai/p/6899141.html

weixin_34023863

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery--停止动画和判断是否处于动画状态stop()

stop()--语法结构stop（[clearQueue],[gotoEnd]）。clearQueue和gotoEnd都是可选参数，为Boolean（true或者false）1、直接使用stop(),会立即停止当前正在进行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画<!DOCTYPE html><html lang="en">...
复制链接

扫一扫