Как остановить анимацию jquery на основе значений CSS?

Итак, у меня есть два div: #div1 и #div2. Я хочу, чтобы «#div2» исчезал, когда «#div1» имеет значение CSS: 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");
});

Проблема, с которой я сталкиваюсь, заключается в том, что я меняю это значение CSS (для #div1) через Javascript, и по этой причине мой js не подтверждает изменение и не заставляет div исчезнуть (я думаю). Есть ли способ заставить #div2 исчезнуть, когда свойство CSS #div1 top = 0, и снова появиться всякий раз, когда оно изменяется? Или есть лучший способ реализовать это?


jquery css effects
person kevn    schedule 31.05.2010    source источник

Ответы (3)


arrow_upward
3
arrow_downward

вместо использования этого метода использования .position()

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

более подробно об этом: http://api.jquery.com/position/

person Pranay Rana    schedule 31.05.2010
comment
Пранай, спасибо за ответ. Предупреждение, созданное с использованием .position, приводит к значениям для левого и верхнего для #div1. Однако когда эти значения изменяются программно с помощью Javascript, новые значения не записываются. Мне нужно изменить поведение на основе этих новых значений. Проблема по-прежнему заключается в том, чтобы найти способ для моего скрипта улавливать эти изменения и действовать в соответствии с ними. - person kevn; 31.05.2010
comment
ознакомьтесь с этой ссылкой, которая может помочь вам в достижении вашей цели quirksmode.org/js/findpos.html - person Pranay Rana; 01.06.2010

arrow_upward
1
arrow_downward

Попробуйте это для функции щелчка:

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

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

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

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

чтобы отразить правильное позиционирование, #div1 должен иметь абсолютную позицию, а родитель #div1 должен иметь относительную позицию.

person M A Hossain Tonu    schedule 03.06.2010

arrow_upward
1
arrow_downward

Просто используйте обратные вызовы

#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');
             }
        });
});
person José Manuel Lucas    schedule 07.06.2010