Comment arrêter une animation jquery basée sur les valeurs CSS?

Question

Donc, j'ai deux divs: # div1 et # div2. Je veux que '# div2' disparaisse quand '# div1' a la valeur CSS: top = 0px.

Voici le CSS:

#div1 { 
    top: 0px; 
} 
#div2 { 
    display: block; 
} 
if ($('#div1').css('top') == '0px') { 
    $("#div2").hide(); 
} else { 
    $("div2").fadeIn(); 
} 
$("div2").click(function(){ 
     $("#div1").animate({top:"+=315px"}, "slow"); 
}); 

Le problème que je suis en cours d'exécution en est que je change la valeur CSS (pour # div1) via Javascript et pour cette raison, mes js ne reconnaît pas la changer et ne fait pas disparaître la div (je pense). Y at-il un moyen de faire disparaître # div2 lorsque la propriété CSS de # div1 est supérieure à 0 et réapparaître quand elle est modifiée? Ou y a-t-il une meilleure façon de mettre en œuvre cela?

Answer 1

plutôt que d'utiliser cette méthode d'utilisation .position()

<script> 
var p = $("#div1"); 
var position = p.position(); 
alert("left: " + position.left + ", top: " + position.top); 
</script> 

plus de détails à ce sujet: http://api.jquery.com/position/

Answer 2

Essayez ceci pour la fonction clic:

$("div2").click(function(){ 

     $("#div1").parent().css({postion,"relative"}); 

     $("#div1").css({postion,"absolute"}); 

     $("#div1").animate({top:"+=315px"}, "slow"); 
}); 

afin de refléter le bon positionnement # div1 devrait avoir la position absolue et le parent de # div1 devrait avoir une position relative.

Answer 3

Il suffit d'utiliser les callbacks

#div1 { 
    top: 0px; 
} 
#div2 { 
    display: block; 
} 

$("div2").click(function(){ 
     $("#div1").animate({top:"+=315px"}, "slow", function(){ 
      if($('#div1').position().top < 1){ 
        $('#div1').hide(); 
      }else{ 
        $('#div1').fadeIn('slow'); 
      } 
     }); 
});