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

发布于 2024-09-03 11:01:54 字数 494 浏览 5 评论 0原文

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

这是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 时消失并在更改时重新出现？或者有更好的方法来实现这个吗？

原文

So, I have two divs: #div1 and #div2. I want '#div2' to disappear when '#div1' has the CSS value: top = 0px.

Here is the 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");
});

The problem I am running into is that I'm changing that CSS value (for #div1) via Javascript and for this reason, my js doesn't acknowledge the change and doesn't make the div disappear (I think). Is there any way to make #div2 disappear when #div1's CSS property top = 0 and reappear whenever it is changed? Or is there a better way to implement this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清浅ˋ旧时光 2024-09-10 11:01:54

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

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

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

rather than using this use method .position()

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

more detail about this : http://api.jquery.com/position/

回复收藏 0 原文

夏花。依旧 2024-09-10 11:01:54

尝试单击功能：

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

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

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

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

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

Try this for click function:

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

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

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

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

in order to reflect proper positioning #div1 should have absolute position and parent of #div1 should have relative position.

回复收藏 0 原文

小情绪 2024-09-10 11:01:54

只需使用回调

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

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

回复收藏 0 原文

~没有更多了~