关于stop（）方法的理解

来源：互联网发布：vpn代理软件哪个好编辑：程序博客网时间：2024/06/06 03:18

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <style media="screen">            *{                margin: 0;                padding: 0;            }            .box{                width: 900px;                height: 300px;                border:1px solid #000;                position: relative;                overflow: hidden;                margin: 100px auto;            }            .box ul li{                list-style: none;                position: absolute;                top: 0;            }            .box ul li img{                width: 600px;                height: 300px;            }            .box ul li.img1{left: 0;}            .box ul li.img2{left: 225px;}            .box ul li.img3{left: 450px;}            .box ul li.img4{left: 675px;}            .mask{                width: 600px;                height: 300px;                background: #000;                opacity: 0.7;                position: absolute;                /*z-index: 999;*/                top: 0;                left: 0;            }        </style>    </head>    <body>        <div class="box">            <ul>                <li class="img1" >                    <a href="#"><img src="images/0.jpg" alt=""></a>                    <div class="mask"></div>                </li>                <li class="img2" >                    <a href="#"><img src="images/1.jpg" alt=""></a>                    <div class="mask"></div>                </li>                <li class="img3" >                    <a href="#"><img src="images/2.jpg" alt=""></a>                    <div class="mask"></div>                </li>                <li class="img4" >                    <a href="#"><img src="images/3.jpg" alt=""></a>                    <div class="mask"></div>                </li>            </ul>        </div>    </body>    <script src="jquery.js" charset="utf-8"></script>    <script type="text/javascript">        $(".box ul li").mouseenter(function(){            $("li").stop(true);            var index = $(this).index();            $(".box ul li").each(function(i){                if (i <= index) {                    $(this).animate({"left":100 * i},700);                }else{                    $(this).animate({"left": 100　* (i - 1) + 600},700);                }            })            $(this).find(".mask").stop().fadeOut();        })        $(".box li").mouseleave(function(){            $(this).find(".mask").stop().fadeIn();            $(".box li").each(function(i){                $(this).animate({"left": 225 * i},500)            })        })    </script></html>

以上是一个百叶窗的代码在代码中 stop的方法

stop（true）  表示停止队列中的所有动画，包括fadeIn  fadeOut

如果是false 就是关闭当前的队列

还可以有第二个参数，如果是ture 表示完成当前的动画，false表示不完成当前的动画，

默认是stop（false，false）；

0 0