如何停止基於CSS值的jQuery動畫？

所以，我有兩個div：＃DIV1和＃DIV2。當'＃div1'具有CSS值：top = 0px時，我希望'＃div2'消失。如何停止基於CSS值的jQuery動畫？

這裏是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"); 
});

我遇到的問題是，我通過Javascript併爲此改變這種CSS值（＃DIV1），我的js不承認改變並不會使div消失（我認爲）。有什麼方法可以讓＃div2在＃div1的CSS屬性top = 0時消失，並且每當它改變時都會重新出現？還是有更好的方法來實現這一點？

來源

2010-05-31 kevn

，而不是採用這種使用方法.position()

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

詳細瞭解這一點：http://api.jquery.com/position/

來源

2010-05-31 18:11:36

Pranay，謝謝您的回答。使用.position創建的警報會生成＃div1的左側和頂部的值。但是，如果使用Javascript以編程方式更改這些值，則不記錄新值。我需要根據這些新值改變行爲。問題仍然是爲我的腳本找到一種方法來捕捉這些變化並對其採取行動。 – kevn 2010-05-31 19:28:19

查看此鏈接可能會幫助您實現您的目標http://www.quirksmode.org/js/findpos.html – 2010-06-01 03:39:06

嘗試此點擊功能：爲了

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

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

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

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

，以反映正確定位＃DIV1應有＃div1的絕對位置和父親應該有相對位置。

來源

2010-06-03 13:39:00

只需使用回調

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

來源

2010-06-07 08:13:10

如何停止基於CSS值的jQuery動畫？

回答

相關問題