jquery .animate（）mouseover/mousout

Question

我有一个动态的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 
     }); 
} 

看来，鼠标移开时我可以恢复动画不调整股利，或调整DIV而不恢复动画。

有人可以帮我这个吗？

这里是工作的js小提琴

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