如何在用戶滾動到N點後觸發動畫 - 具有多個動畫的jQuery航點.animate（）

我需要你的幫助！如何在用戶滾動到N點後觸發動畫 - 具有多個動畫的jQuery航點.animate（）

基本想法：我想要當用戶滾動到一個點（在頁面中間 - 讓它說從頂部500px）然後我們有一些動畫，當然我不會問如何做所有的動畫的東西，但我需要你給我關於回調的基本想法

回調，我的意思是：第一次動畫後，我們獲得第二動畫，然後第三動畫。我如何解決這個問題？

情景：

讓我們說，我們有4個箱子，他們有紅色，藍色，橙色和粉紅色。
用戶從頂部滾動到500px後 - 我想要第一個紅色框淡入淡出
從那2秒開始，我想要紅色框淡出，藍色框將淡入淡出。
在我最初的想法，我會需要它們旋轉或一些其他的動畫 - 如果你能做到這一點也將是巨大的:)，請，如果你認爲我要求太多忽略了這一點

工具：

jQuery的航點http://imakewebthings.com/jquery-waypoints/

也許jQuery的交通？ http://ricostacruz.com/jquery.transit/

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8"> 
</head> 
<body> 


    <div id="container"> 
    <div class="red box"></div> 
    <div class="blue box"></div> 
    <div class="orange box"></div> 
    <div class="pink box"></div> 
    </div> 
</body> 
</html>

+1正確的解決方案，因爲我總是感謝所有的解決方案，我會，如果它的作品:)

感謝投上一票！

來源

2013-05-02 Budi Tanrim

我正在使用jQuery航點。

這將被觸發時，有問題的元素是完全可見的，這意味着它的底部視口的底部之上：

$('.red_box').waypoint(function(direction){ 
    $('.red_box').fadeIn(); 
    window.setTimeout(animateBlue, 2000); 
},{offset: 'bottom-in-view'});

的動畫開始和動畫的計時器揭開序幕，將調用過程兩秒後指定的功能。

function animateBlue(){ 
    $('.red_box').fadeOut(function(){ 
    $('.blue_box').fadeIn(); 
    }); 
    window.setTimeout(animatePink, 2000);  
} 

function animatePink(){ 
    $('.blue_box').fadeOut(function(){ 
    $('.pink_box').fadeIn(); 
    }); 
}

紅色框淡出，並在動畫完成時，藍色框消失。

如需進一步動畫您可以使用更多的航點或在一定時間後用另一個電話。有關的褪色功能的API幫助看
http://api.jquery.com/category/effects/fading/
（你可能知道）

當然你也可以用時序調整而當動畫揭開序幕。
我不確定是否要在動畫完成後啓動兩秒鐘。而且我也不確定紅色和藍色是否應該同時淡出。

旋轉：
http://javascriptisawesome.blogspot.de/2011/09/jquery-css-rotate-and-animate-rotation.html

來源

2013-05-02 15:19:08 MentholBonbon

不，紅色應該先淡出，然後藍色淡入淡出。所以你的animateBlue（）代碼看起來是正確的，你能幫我舉一些例子，如果有另外一個函數，比如說animatePink（）函數。我仍然不明白把它放在哪裏:) – 2013-05-02 15:27:06

如果你只是想在2秒後出現粉紅色的那個：我已經添加了一些代碼可以做到這一點。對於另一個路點只需使用上面的代碼。 – MentholBonbon 2013-05-02 15:34:49

基本上，你想要做的是：

$('#el1').fadeIn(500,function(){ 
    $('#el1').delay(2000).fadeOut(500,function(){ 
     $('#el2').fadeIn(500) 
    }) 
})

1個時動畫完成，它調用另一個之一！

來源

2013-05-02 14:56:35

如何調用另一個呢？到目前爲止，我總是找到一篇文章或示例來進行回調。我可以簡單地在裏面添加一些函數（）{}嗎？最佳實踐可以嗎？謝謝 – 2013-05-02 15:00:50

你可以嘗試使用jQuery的承諾 - 它基本上是爲了鏈接函數而設置的，並且避免了函數在回調中的初始化。 [這裏的第一個答案是一個很好的例子]（http://stackoverflow.com/questions/10370298/how-do-i-animate-in-jquery-without-stacking-callbacks） – andymacd 2013-05-02 15:03:12

是的，沒錯。 andymacd評論將使它更清潔和最佳。 – 2013-05-02 15:09:12

如何在用戶滾動到N點後觸發動畫 - 具有多個動畫的jQuery航點.animate（）

回答

相關問題