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, или изменить размер DIV без возобновления анимации.

Может кто-нибудь помочь мне с этим?

здесь является рабочим расслоением плотной скрипки

http://jsfiddle.net/29cwcx04/

Thanx

Answer 1

Проблемы, я считаю, что ваши резки ширины и высоту анимации перед его сделали повторно проклейку круга назад к нормальный размер. Далее мы быстро исправить:

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