Question

所以，我有两个div：＃div1和#div2。当'#div1'具有CSS值时，我希望'＃div2'消失：top = 0px。

这是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消失（我认为）。当#div1的CSS属性top = 0时，是否有任何方法可以使#div2消失并在更改时重新出现？或者有更好的方法来实现这个吗？

Answer 1

而不是使用此方法.position()

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

有关此内容的更多详细信息：http://api.jquery.com/position/

Answer 2

尝试使用点击功能：

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

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

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

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

为了反映正确的定位#div1应该具有绝对位置，＃div1的父级应该具有相对位置。

Answer 3

只需使用回调

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

如何根据CSS值停止jquery动画？

3 个答案: