Wie unterbreche ich eine JQuery-Animation basierend auf CSS-Werten?

Question

Also habe ich zwei divs: # div1 und # div2. Ich möchte, dass '# div2' verschwindet, wenn '# div1' den CSS-Wert hat: top = 0px. Hier

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

Das Problem bei mir läuft in ist, dass ich zu ändern, dass die CSS-Wert (# div1) via Javascript und aus diesem Grund, meine js nicht anerkennt die Veränderung und macht das Div nicht verschwinden (denke ich). Gibt es eine Möglichkeit, # div2 verschwinden zu lassen, wenn # div1s CSS-Eigenschaft top = 0 ist und immer wieder erscheint, wenn es geändert wird? Oder gibt es eine bessere Möglichkeit, dies zu implementieren?

Answer 1

anstatt diese Verwendung Methode .position()

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

ausführliche dazu: http://api.jquery.com/position/

Answer 2

Try this für Klick-Funktion:

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

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

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

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

, um die richtige Positionierung # div1 widerspiegeln sollte absolute Position haben und Eltern von # div1 sollte relative Position haben.

Answer 3

Verwenden Sie einfach Rückrufe

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