Jquery anime le problème du fond

Question

C'est étrange. J'ai une animation qui commence quand je .hover sur un DIV. Dans ce div j'ai un autre en position absolue que je veux monter jusqu'à ce que la souris reste sur la div principale et descendre dans votre position quand je sors de la div principale. Un effet de survol simple. J'ai écrit cette fonction qui fonctionne bien à part un bug étrange.

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

J'ai besoin de + = 30 et - = 30 parce que je dois appliquer cette fonction à une plage de div avec un fond différent. Le problème est que si je dors et descend de div, le DIV est animé, mais quand il descend, il diminue la valeur de chaque animation. Si je monte et descends de la div principale, je vois que la div animée descend même au-delà de la div principale. Je pense que quelque chose me manque pour résoudre ce bug. Merci pour toute aide

Answer 1

Si le bottom n'est pas 0 initialement, alors vous pouvez stocker la valeur du bas initial, et l'utiliser dans la deuxième fonction. (Si la première bottom est 0, puis juste utiliser.)

Dans l'exemple ci-dessous, la position bottom initiale est stockée en utilisant l'data() attribut pour inside, il est récupéré dans le deuxième gestionnaire pour revenir à la position initiale .

Un exemple concret: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

Je ne pense pas que vous pouvez utiliser par rapport - valeurs (= 30px et + = 30px) dans ce cas, que l'animation peut arrêter à tout moment arbitraire va jeter les animations qui le suivent. Il est préférable d'appeler chaque() sur l'ensemble correspondant, de calculer les décalages corrects et de transmettre les valeurs directement dans votre fonction de survol.