jquery .animate() 鼠标悬停/鼠标移出

Question

我有一个 div 动画可以在指定区域流畅地改变位置。这很好用。现在我希望动画在 mouseover 时暂停并在 mouseout 时恢复加上 div 在 mouseover 时放大并在 mouseout 时调整到以前的小尺寸。

我的代码如下所示：

function animateBubble(canvas, bubble){

    newB = newSize();
    newQ = newPosition(canvas, bubble);
    oldQ = $(bubble).offset();
    speed = calcSpeed([oldQ.top, oldQ.left], newQ);

    $(bubble).animate({ // initial animation start of bubble
        top: newQ[0],
        left: newQ[1],
        width: newB[0],
        height: newB[1]
    },
    {   duration: speed, // set the duration
        step: function( now, fx ) { // get the coordinates of the bubble dynamically
            var offset = $(this).offset();
            xPos = offset.left; // now position
            yPos = offset.top;
            nowWidth = $(this).width();
            nowHeight = $(this).height();
        },
        complete: function(){ // do the whole animation again upon completion
            animateBubble(canvas, bubble);
        }
    }).mouseover(function(){ // pause animation on mouseover
        $(bubble).stop();
        $(bubble).height(230);
        $(bubble).width(230);
        }).mouseleave(function(){ // restart animation on mouseout
            //alert('hello');
            $(this).height(nowHeight);
            $(this).width(nowWidth);
            $(this).start();
            animateBubble(canvas, bubble); // doesn't want to start again
        });
}

似乎在鼠标移开时我可以在不调整 div 大小的情况下恢复动画，或者在不恢复动画的情况下调整 div 大小。

有人可以帮我解决这个问题吗？

这是一个可以工作的 js fiddle

http://jsfiddle.net/29cwcx04/

谢谢

Answer 1

我认为，问题在于您在完成将圆的大小重新调整回正常大小之前剪切了宽度和高度动画。这是一个快速修复：

...mouseleave(function(){ // restart animation on mouseout
            //alert('hello');
            $(this).height(nowHeight);
            $(this).width(nowWidth);
            setTimeout(function(){animateBubble(canvas, bubble);},1000); 
        });

jquery .animate() 鼠标悬停/鼠标移出

jquery .animate() mouseover / mousout

javascript

jquery

animation

mouseover

mouseout