Jquery animate bottom problem

Question

È strano. Ho un'animazione che inizia quando mi trovo su un DIV. In questo div ho un altro in posizione assoluta che voglio spostare fino a quando il mouse rimane sul div principale e scendi nella tua posizione quando esco dal div principale. Un semplice effetto hover. Ho annotato questa funzione che funziona bene a parte uno strano bug.

  var inside = $('.inside') 

     inside.hover(function() { 
      $(this).children(".coll_base").stop().animate({ 
       bottom:'+=30px' 
      },"slow") 
      }, function() { 
      $(this).children(".coll_base").stop().animate({ 
       bottom:'-=30px' 
      },"slow"); 
      }); 

ho bisogno di + = 30 e - = 30 perché devo applicare questa funzione a un intervallo di div con fondo diverso. Il problema è che se metto avanti e indietro da div il DIV si anima a destra, ma quando si scende diminuisce il valore di fondo ad ogni animazione. Se vado su e giù dal div principale, vedo che il div animato scende anche oltre il div principale. Penso che mi manca qualcosa per risolvere questo bug. Grazie per qualsiasi aiuto

Answer 1

Se il bottom non è 0 inizialmente, allora si potrebbe memorizzare il valore di fondo iniziale, e l'uso che nella seconda funzione. (Se l'iniziale bottom è 0, poi basta usare quello.)

Nell'esempio che segue, il bottom posizione iniziale viene memorizzata utilizzando l'attributo data() per inside, allora è recuperato nel secondo conduttore per tornare alla posizione originale .

vivo esempio:http://jsfiddle.net/VAsZZ/

var inside = $('.inside'); 

inside.hover(
    function() { 
     if(!inside.data('bottom')) { 
      inside.data('bottom',$(this).children(".coll_base").css('bottom')); 
     } 
     $(this).children(".coll_base").stop().animate({ bottom:'+=30px' },"slow") 
    }, 
    function() { 
     $(this).children(".coll_base").stop().animate({bottom:$(this).data('bottom') },"slow"); 
    } 
);​ 

Answer 2

Non credo che si può usare relativa (- = 30px e + = 30px) valori in questo caso, come l'animazione può fermare in qualsiasi punto arbitrario che eliminerà le animazioni che lo seguono. È meglio chiamare each() sul set abbinato, calcolare gli offset corretti e passare i valori direttamente nella funzione hover.