Question

我有一个功能，因为我也想要它，只是它看起来非常混乱和臃肿，所以我想知道，有没有更好的方法来编码下面？

function careerFlyIn(){

    var distance = $('.row').offset().top,
        $window = $(window);
    var distance = distance - 200;
    var flyInR = $('.path-description');
    var flyInL = $('.path-title');

    $window.scroll(function() {
        if ( $window.scrollTop() >= distance ) {
            $('.career-path .row:first-child').find(flyInL).animate({ 'left' : '0px' } ,400, 'easeOutBounce', function () {  
                $('.career-path .row:nth-child(2)').find(flyInL).animate({ 'left' : '0px' } ,400, 'easeOutBounce', function () { 
                    $('.career-path .row:nth-child(3)').find(flyInL).animate({ 'left' : '0px' } ,400, 'easeOutBounce', function () { 
                        $('.career-path .row:nth-child(4)').find(flyInL).animate({ 'left' : '0px' } ,400, 'easeOutBounce', function () { 
                            $('.career-path .row:nth-child(5)').find(flyInL).animate({ 'left' : '0px' } ,400, 'easeOutBounce', function () {  }); 
                        });
                    });
                });             
            })
            $('.career-path .row:first-child').find(flyInR).animate({ 'right' : '0px' } ,400, 'easeOutBounce', function () {  
                $('.career-path .row:nth-child(2)').find(flyInR).animate({ 'right' : '0px' } ,400, 'easeOutBounce', function () { 
                    $('.career-path .row:nth-child(3)').find(flyInR).animate({ 'right' : '0px' } ,400, 'easeOutBounce', function () { 
                        $('.career-path .row:nth-child(4)').find(flyInR).animate({ 'right' : '0px' } ,400, 'easeOutBounce', function () { 
                            $('.career-path .row:nth-child(5)').find(flyInR).animate({ 'right' : '0px' } ,400, 'easeOutBounce', function () {  }); 
                        });
                    });
                });             
            })
        }
    });

};

Answer 1

创建要设置动画的项目列表，并在列表中使用异步递归。

function animate(elements, callback)
{
    if (elements.length){
        elements.eq(0).find(flyInR).animate({ 'right' : '0px' }, 400, 'easeOutBounce');
        elements.eq(0).find(flyInL).animate({ 'left' : '0px' }, 400, 'easeOutBounce', function (){
            // Do the remainder of the list (after first item)
            animate(elements.slice(1), callback);
        });
    }
    else {
        // All done, call the final callback
        callback();
    }
}

animate($('.career-path .row'), function() 
{ 
   // do something when all items have finished animating
});

您可以将此模式应用于任何类似的异步操作集。在此示例中，左侧和右侧动画并行运行，但只有一个触发下一个事件（在本例中为左侧）。

Answer 2

这有帮助吗？

$window.scroll(function() {
  if ($window.scrollTop() >= distance) {

    $('.career-path .row').each(function(i) {
      $(this).find(flyInL).delay(400*i)
             .animate({ 'left' : '0px' } ,400, 'easeOutBounce');

      $(this).find(flyInR).delay(400*i)
             .animate({ 'right' : '0px' } ,400, 'easeOutBounce');
    });
  }
});

使用jQuery .delay()方法，Sets a timer to delay execution of subsequent items in the queue。

Answer 3

尝试

function animate($rows, idx, selector, animate) {
    $rows.eq(idx).find(selector).animate(animate, 400, 'easeOutBounce', function() {
        if (idx < $rows.length - 1) {
            animate($rows, idx + 1, selector, animate)
        }
    });
}

var $rows = $('.career-path .row');
animate($rows, 0, flyInL, {
    'left' : '0px'
})
animate($rows, 0, flyInR, {
    'right' : '0px'
})

注意：未经过测试

优化jQuery回调

3 个答案: