Как я останавливаю анимацию jQuery на основе значений CSS?
Так, у меня есть два отделения: #div1 и #div2. Я хочу, чтобы '#div2' исчез, когда '#div1' имеет значение CSS: вершина = 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 не подтверждает изменения и не заставляет отделение исчезнуть (я думаю). Там какой-либо путь состоит в том, чтобы заставить #div2 исчезнуть, когда вершина свойства CSS #div1 = 0 и вновь появляется каждый раз, когда это изменяется? Или есть ли лучший способ реализовать это?
3 ответа
вместо того, чтобы использовать этот метод .position ()
<script>
var p = $("#div1");
var position = p.position();
alert( "left: " + position.left + ", top: " + position.top );
</script>
, подробнее об этом: http://api.jquery.com/position/
Попробуйте это для функции щелчка:
$("div2").click(function(){
$("#div1").parent().css({postion,"relative"});
$("#div1").css({postion,"absolute"});
$("#div1").animate({top:"+=315px"}, "slow");
});
для отражения правильного позиционирования # div1 должен иметь абсолютное положение, а родительский элемент # div1 должен иметь относительное положение.
Просто используйте обратные вызовы
#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');
}
});
});