我有一个函数,它运行取决于父div是窗口顶部的X像素...
if (chartContainer <= 700) {
$('.firstChart').addClass('rotateLeft');
$('.firstChart').animate({'left': 30}, 600);
$('.secondChart').addClass('rotateRight');
$('.secondChart').animate({'right': 30}, 600);
} else if (chartContainer > 700) {
$('.firstChart').removeClass('rotateLeft');
$('.firstChart').animate({'left': -300}, 600);
$('.secondChart').removeClass('rotateRight');
$('.secondChart').animate({'right': -300}, 600);
}
我的函数是添加类很好,但它没有运行动画,如果我删除我的else语句,第一个代码块中的添加类和动画完美运行,任何人都可以看到任何错误的语法吗?
------- JS小提琴---------
答案 0 :(得分:0)
您需要等待.animate
完成,然后触发下一部分。
对于else
块。
$('.firstChart').removeClass('rotateLeft');
$('.firstChart').animate({'left': -300}, 600, function(){
$('.secondChart').removeClass('rotateRight');
$('.secondChart').animate({'right': -300}, 600);
});
if
块相同。
P.S。将else if
部分设为else
。并且,确保您的元素具有非静态的定位,否则此代码可能无效。
答案 1 :(得分:0)
您是否尝试达到以下目标: http://jsfiddle.net/8QFzd/2/
IE 2阻挡了屏幕外(左右隐藏),当你向它们滚动时,它们会与屏幕中心相对应?
var state = 1 ;
$(window).on('scroll', function (e) {
var scrollTop = $(window).scrollTop() ;
var chartContainer = ($('.chartContainer').offset().top - scrollTop);
console.log(chartContainer);
if (chartContainer <= 200) {
if ( state != 1 )
{
console.log('<= 200, add Class & animate') ;
state = 1 ;
$('.firstChart').addClass('rotateLeft');
$('.firstChart').stop().animate({
'left': 30
}, 600);
$('.secondChart').addClass('rotateRight');
$('.secondChart').stop().animate({
'right': 30
}, 600);
}
} else {
if ( state != 2 )
{
console.log('> 200, remove Class & animate') ;
state = 2 ;
$('.firstChart').removeClass('rotateLeft');
$('.firstChart').stop().animate({
'left': -300
}, 600);
$('.secondChart').removeClass('rotateRight');
$('.secondChart').stop().animate({
'right': -300
}, 600);
}
}
});