Làm cách nào để dừng hoạt ảnh jquery dựa trên giá trị CSS?

Question

Vì vậy, tôi có hai div: # div1 và # div2. Tôi muốn '# div2' biến mất khi '# div1' có giá trị CSS: top = 0px.

Đây là 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"); 
}); 

Vấn đề tôi đang chạy vào đó là tôi thay đổi giá trị CSS (ví # div1) thông qua javascript và vì lý do này, js của tôi không thừa nhận thay đổi và không làm cho div biến mất (tôi nghĩ). Có cách nào để làm cho # div2 biến mất khi thuộc tính CSS # div1 hàng đầu = 0 và xuất hiện lại bất cứ khi nào nó được thay đổi? Hoặc là có một cách tốt hơn để thực hiện điều này?

Answer 1

hơn là sử dụng phương pháp này sử dụng chi tiết .position()

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

thêm về điều này: http://api.jquery.com/position/

Answer 2

Hãy thử điều này cho chức năng nhấp chuột:

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

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

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

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

để phản ánh đúng vị trí # div1 nên có vị trí tuyệt đối và cha mẹ của # div1 nên có vị trí tương đối.

Answer 3

Chỉ cần sử dụng 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'); 
      } 
     }); 
});