如何停止基于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动画？

回答

相关问题