温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jQuery如何使用stop()方法停止动画

发布时间:2022-02-22 10:49:51 来源:亿速云 阅读:142 作者:小新 栏目:开发技术

这篇文章主要介绍jQuery如何使用stop()方法停止动画,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

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

jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果,在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
语法:

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

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此,默认地,stop() 会清除在被选元素上指定的当前动画:

<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js"></script>
<script> 
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideDown(5000);
    });
    $("#stop").click(function(){
        $("#panel").stop();
    });
});
</script>
<style type="text/css"> 
#panel,#flip {
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#panel {
    padding:50px;
    display:none;
}
</style>
</head>
<body>
    <button id="stop">停止滑动</button>
    <div id="flip">点击这里,向下滑动面板</div>
    <div id="panel">Hello world!</div>
</body>
</html>


jQuery stop() 动画实例(带参数)

<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js">
</script>
<script> 
$(document).ready(function(){
    $("#start").click(function(){
        $("div").animate({left:"100px"},5000);
        $("div").animate({fontSize:"3em"},5000);
    });
    $("#stop").click(function(){
        $("div").stop();
    });
    $("#stop2").click(function(){
        $("div").stop(true);
    });
    $("#stop3").click(function(){
        $("div").stop(true,true);
    }); 
});
</script> 
</head>
<body>
    <button id="start">开始</button>
    <button id="stop">停止</button>
    <button id="stop2">停止所有</button>
    <button id="stop3">停止但要完成</button>
    <p><b>"开始"</b> 按钮会启动动画。</p>
    <p><b>"停止"</b> 按钮会停止当前活动的动画,但允许已排队的动画向前执行。</p>
    <p><b>"停止所有"</b> 按钮停止当前活动的动画,并清空动画队列;因此元素上的所有动画都会停止。</p>
    <p><b>"停止但要完成"</b> 会立即完成当前活动的动画,然后停下来。</p> 
    <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>

以上是“jQuery如何使用stop()方法停止动画”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI