jquery论三种动画停止的区别 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="../js/jquery-1.9.0.min.js" ></script>
        <script>
        $(document).ready(function(){
            $(".start").click(function(){
                $("div").animate({width:'100px'},3000);
                $("div").animate({fontSize:'3em'},3000);
            });
            $(".stop1").click(function(){
                $("div").stop();//仅仅停止第一个动作
            });
            $(".stop2").click(function(){
                $("div").stop(true);//真的停止了所有的动作
            });
            $(".stop3").click(function(){
                $("div").stop(true,true);//真的停止了所有的动作并且真的一瞬间完成了第一个的动作
            });
        })
        </script>
        <title>jQuery三种动画停止</title>
        <style type="text/css"> 
#panel
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
    padding:50px;
}
</style>
</head>
<body>
    <button class="start">开始</button>
    <button class="stop1">停止</button>
    <button class="stop2">停止所有</button>
    <button class="stop3">停止所有并完成</button>
<div id="panel">Hello world!</div>
</body>
</html>

 

posted @ 2018-01-20 20:25  SKZB  阅读(99)  评论(0)    收藏  举报