CSS değerlerine göre jQuery animasyonunu nasıl durdurabilirim?

Question

İki div var: # div1 ve # div2. '# Div1' CSS değerine sahip olduğunda kaybolmak için '# div2' istiyorum: top = 0px.

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

İçine çalıştırıyorum sorun ben Javascript üzerinden ve bu nedenle (# div1 için) CSS değerini değiştirerek olmam, benim js kabul etmez: Burada

CSS değişiyor ve div'u yok etmiyor (sanırım). # Div1'in CSS özelliği top = 0 olduğunda # div2'nin kaybolması ve değiştirildiği zaman yeniden ortaya çıkması için herhangi bir yol var mı? Ya da bunu uygulamak için daha iyi bir yolu var mı?

Answer 1

ziyade bu konuda bu kullanım yöntemi .position()

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

fazla ayrıntı kullanmaktan daha: http://api.jquery.com/position/

Answer 2

tıklama fonksiyonu için bu deneyin: sırayla

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

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

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

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

doğru konumlandırma # div1 yansıtmak için gereken mutlak pozisyona sahip ve # div1'in ebeveyni göreli pozisyona sahip olmalıdır.

Answer 3

Sadece Cevabınız için

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