Jquery动画效果问题

Question

Jquery动画效果问题

powerfulxm

31574450

发布于
2015-01-31

Tranch

70872028

更新于
2015-02-01

问题描述：
在div a 向右下角移动的过程中，如果触发mouseover事件，div a 就会停顿片刻，然后向反方向移动到 0 ，0 坐标的位置。

请问，mouseover事件是写在最后的，为什么触发了该事件之后，div a 还会执行返回0，0坐标的动作？请解答一下，谢谢。

html<html>
<head>
    <script src="jquery-1.7.2.js"></script>
    <style>
        *{
            margin:0px;
            padding:0px;
        }

        #a{
            width:100px;
            height:100px;
            position:absolute;
            left:0px;
            background:#f00;
        }

        #b{
            position:absolute;
            right:100px;
        }
    </style>
    <script>
        $(function(){
            $('button').click(function(){

                $('#a').animate({left:'400px',top:'400px',opacity:'0.3',borderRadius:'100px'},3000)
                .delay(100).animate({left:'0px',top:'0px',opacity:'1',borderRadius:'0px'},3000)
                .mouseover(function(){
                    $(this).stop();
                })

            })

        })  



    </script>
</head>
    <body>
        <div id="a"></div>

        <div id="b">
            <button>开始</button>
        </div>

    </body>
</html>

jquery

阅读 3.1k

1 个回答

很正常啊，你有三段动画（包括 delay），形成了一个动画组成的队列。在第一段动画运行的时候触发 stop，就会把队列当前执行的动画中断，队列后面的动画继续执行，那一下下停顿就是你的 delay。

这和你把 mouseover 事件回调写在前还是后是没有关系的，你先写 mouseover 绑定也是一样，因为回调里的事情只有在 mouseover 真的发生了以后才会执行。

撰写回答