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

Question

Итак, у меня есть два 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, и появиться снова при каждом его изменении? Или есть лучший способ реализовать это?

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

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

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

Answer 3

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

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

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

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

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

для отражения правильного позиционирования # div1 должен иметь абсолютную позицию, а родительский элемент # div1 должен иметь относительную позицию.