jQuery .animate() 鼠标移入/移出

Question

jQuery .animate() 鼠标移入/移出

javascriptjqueryanimationmouseovermouseout

4

我有一个div，它被动画地流畅地变换在一个指定的区域内。这个效果很好。

现在我想让动画在鼠标悬停时暂停，在鼠标移开时恢复，并且在鼠标悬停时使div放大，在鼠标移开时调整大小回到原来的小尺寸。

我的代码如下：

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
        });
}

看起来在mouseout事件中，我要么可以恢复动画而不改变div的大小，要么可以改变div的大小而不恢复动画。

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

这里是一个可工作的js fiddle示例：

http://jsfiddle.net/29cwcx04/

谢谢！

- Chris

2

只是想告诉你，如果你提供一个工作示例，比如代码片段或jsFiddle，我相信这里的一些用户会很高兴地玩耍。 - A. Wolff

我在这里添加了一个暂停插件。这是你想要的吗？http://jsfiddle.net/29cwcx04/3/ - AtheistP3ace

是的，类似这样。但是气泡的大小应该回到之前较小的大小，或者也可以使用CSS悬停效果吗？ - Chris

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hozeis · Accepted Answer

我认为问题在于你在圆形缩小回正常大小之前就中断了宽度和高度动画。以下是一个快速解决方案：

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