Come posso interrompere un'animazione jquery basata su valori CSS?

Question

Quindi, ho due div: # div1 e # div2. Voglio che "# div2" scompaia quando "# div1" ha il valore CSS: top = 0px.

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

Il problema che sto funzionando in è che sto cambiando quel valore CSS (per # div1) tramite Javascript e per questo motivo, il mio js non riconosce il cambia e non fa sparire il div (penso). C'è un modo per far sparire # div2 quando la proprietà CSS di # div1 top = 0 e riappare ogni volta che viene cambiata? O c'è un modo migliore per implementare questo?

Answer 1

piuttosto che utilizzare questo metodo uso .position()

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

maggiori dettagli su questo: http://api.jquery.com/position/

Answer 2

Prova questa per la funzione click:

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

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

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

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

al fine di riflettere il corretto posizionamento # div1 dovrebbe avere posizione assoluta e parent di # div1 dovrebbe avere posizione relativa.

Answer 3

Basta utilizzare le richiamate

#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'); 
      } 
     }); 
});