¿Cómo detengo una animación jquery basada en valores CSS?

Question

Entonces, tengo dos divs: # div1 y # div2. Quiero que '# div2' desaparezca cuando '# div1' tiene el valor CSS: top = 0px.

Aquí es el 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"); 
}); 

El problema que estoy en es que voy a cambiar ese valor CSS (para # div1) a través de Javascript y por esta razón, mis js no menciona los cambiar y no hace que el div desaparezca (creo). ¿Hay alguna manera de hacer desaparecer # div2 cuando # div1's CSS property top = 0 y reaparecer siempre que se modifique? ¿O hay una mejor manera de implementar esto?

Answer 1

en lugar de utilizar este método de uso .position()

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

más detalles acerca de esto: http://api.jquery.com/position/

Answer 2

probar este para la función de clic:

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

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

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

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

con el fin de reflejar el posicionamiento correcto # div1 debe tener una posición absoluta y el padre de # div1 debe tener una posición relativa.

Answer 3

sólo tiene que utilizar devoluciones de llamada

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