使用jQuery觸發滾動事件的多個動畫

我有一個功能，當滾動到視圖中時淡入特定的DIV。我在這些DIV中有一些子元素，我希望在每個淡入淡出動畫結束時進行動畫處理。我如何在下面的函數中添加額外的函數？使用jQuery觸發滾動事件的多個動畫

$(window).scroll(function(d,h) { 
tiles.each(function(i) { 
    a = $(this).offset().top + $(this).height(); 
    b = $(window).scrollTop() + $(window).height(); 
    if (a < b) $(this).fadeTo(500,1) ???AND SLIDE CHILD ELEMENT ALSO!!???; 
    ///how to I target each child element to do something in the above line??? 
    }); 
});

這是一個jsFiddle DEMO這將幫助您形象化我的概念。動畫已經起作用，問題在於滑動子元素最初開始，我想要做的是在每個onScroll漸變開始時連續開始每個幻燈片功能。非常感謝此事。這將幫助我與jQuery的步道和磨難一噸！

來源

2012-11-12 Jim22150

@NullPointer檢查鏈接的小提琴演示 – Archer

是的，看演示，你會立刻知道我想要什麼去做。 – Jim22150

如果你想在衰落結束後做一些事情，創建觸發一個回調函數，當動畫即將結束：

var that = $(this); 
if (a < b) $(this).fadeTo(500,1, function() { 
    alert ("Do something afterwards"); 
    that.children().someAction(); 
});

我希望，這就是你想要的。

爲了讓您的例子，則可以使用此：

$(window).scroll(function(d,h) { 
    tiles.each(function(i) { 
     a = $(this).offset().top + $(this).height(); 
     b = $(window).scrollTop() + $(window).height(); 
     var that = $(this); 
     if (a < b && true != $(this).data('faded')) { 
      $(this).data('faded', true).fadeTo(500,1, function() { 
       that.find('div').animate({left: '+=300', top: '+=12'}, 4500); 
      }); 
     } 
    }); 
});

這裏有一個演示：http://jsfiddle.net/mSRsA/

來源

2012-11-12 15:37:21 insertusernamehere

我插入代碼沒有成功。我猜測它不會去做我想要做的事情，因爲'幻燈片'動畫需要綁定到一個數組中，所以每個單獨的幻燈片動畫都以onScroll事件中的每個單獨的TILE淡出開始。 – Jim22150

psuedo代碼：當第一個TILE淡入然後scrollMe1幻燈片，當第二個TILE淡入然後scrollMe2幻燈片，當第三個TILE ... etc ... – Jim22150

@ user1644123檢查更新後的答案中的小提琴 - 我希望我能幫助你。 :) – insertusernamehere

使用jQuery觸發滾動事件的多個動畫

回答

相關問題