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