Question

我有一个函数，它运行取决于父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小提琴---------

http://jsfiddle.net/Gm9Fv/1/

Answer 1

您需要等待.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。并且，确保您的元素具有非静态的定位，否则此代码可能无效。

Answer 2

您是否尝试达到以下目标： 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);
        }
    }

});

如果else语句不能在jQuery中工作

2 个答案: