jquery 动画队列 停止动画

2022-07-07  本文已影响0人  程序猿的小生活
<html>
    <head>
        <script src="js/jquery.js"></script>
        <meta charset="utf-8">
        <title>动画队列</title>
    </head>
    <body>
        <button id="startan">开始动画</button>
        <button id="stopan">停止动画</button>
        <div  id="app" style="width: 100px;height: 100px;display: none;background-color: pink;"></div>
    </body>
    <script>
        
        $(function(){
            //模拟动画队列
            $("#startan").click(function(){
                $("#app").slideDown(2000).slideUp(2000)
            })
            //停止动画执行stop方法
            //stop两个参数 1.是否清除队列 2.是否跳转最终效果
            $("#stopan").click(function(){
                //$("#app").stop(true,true);
                //$("#app").stop(true,false);
                //$("#app").stop(false,false);
                $("#app").stop(false,true);
                //$("#app").stop();
            })
        })
    </script>
</html>
上一篇 下一篇

猜你喜欢

热点阅读