Jquery animate bottom problema

Question

Es extraño. Tengo una animación que comienza cuando salgo en un DIV. En este div tengo otro en posición absoluta que quiero mover hacia arriba hasta que el mouse permanezca en div principal y baje en su posición cuando salga de div principal. Un simple efecto estacionario. He escrito esta función que funciona bien aparte un error extraño.

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

Necesito + = 30 y - = 30 porque tengo que aplicar esta función a un rango de div con diferente fondo. El problema es que si me desplazo sobre y fuera de div, el DIV anima a la derecha, pero cuando baja, disminuye el valor de la parte inferior de cada animación. Si voy hacia arriba y hacia abajo desde el div principal veo que el div animado desciende incluso más allá del div principal. Creo que echo de menos algo para resolver este error. Gracias por cualquier ayuda

Answer 1

Si el bottom no es inicialmente, entonces puede almacenar el valor inferior inicial y usarlo en la segunda función. (Si la inicial bottom es 0, a continuación, sólo tiene que utilizar.)

En el ejemplo siguiente, el bottom posición inicial se almacena utilizando el atributo data() para inside, a continuación, se recupera en la segunda rutina de tratamiento para volver a la posición original .

ejemplo vivo: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

No creo que se puede utilizar relativa (- = 30px y 30px + =) los valores, en este caso, ya que la animación puede detenerse en cualquier punto arbitrario que arrojará las animaciones que lo siguen. Lo mejor es llamar a cada uno() en el conjunto combinado, calcular los desplazamientos correctos y pasar los valores directamente a su función de desplazamiento.