jquery动画效果

标签：基本   index   code   tar   function   hide   ade   sem   透明度   

<button class="btns">start</button>
<button class="btnp">stop</button>
<button class="btnf">finish</button>
<ul>
    <li><span>mousedown([[data],fn])</span></li>
    <li><span>mouseenter([[data],fn])</span></li>
    <li><span>mouseleave([[data],fn])</span></li>
    <li><span>mousemove([[data],fn])</span></li>
</ul>

    $(function () {
        //声明变量控制奇偶
        var count = 0;
        $(".btns").click(function () {
            addanimate();
        });
        function addanimate() {
            $("li").each(function (index) {
                var delaytime = index * 100;
                $(this).delay(delaytime).animate({
                    width: count % 2 == 0 ? 200 : 100
                }, 1000);
            }).last().queue(function () {
                //当前最后一个元素动画的队列执行完成之后执行的回调函数
                count++;
                $(this).dequeue();//删除当前元素最前端的队列函数
                addanimate();
            });
        }

        $(".btnp").click(function () {
            $("li").stop();
        });
        $(".btnf").click(function () {
            $("li").finish();
        });
    });

jquery动画效果

标签：基本   index   code   tar   function   hide   ade   sem   透明度   

原文地址：https://blog.51cto.com/14584021/2472647