jQuery：在一組div上有延遲的多個動畫

Question

我有一組4個div，我正在尋找使用jQuery來動畫它們一次，然後延遲使用delay（），然後運行另一組動畫，讓div恢復到原來的配置。下面是我的代碼：

//only selectors called 'option1' are affected by delay, and not 'option1 img' or 'option2' 
$("#option1").showOption1().delay(3000).hideOption1(); 

//if i don't attach to #option1, delay doesn't work, but the animations that need to happen  simultaneously work 
$(document).showOption1().delay(3000).hideOption1(); 

jQuery.fn.showOption1 = function(){ 

    $("#option2, #option3, #leftColumn").fadeOut(1000); 

    $("#option1").css("zIndex", "5"); 

     $("#option1").animate({ 
     left: "370px", 
     }, 1500); 

    $("#option1 img").animate({ 
     width: "500px", 
    }, 1500, function(){ 
     $("p.optionText").text('hello'); 
    }); 

return this; 
} 

jQuery.fn.hideOption1 = function(){ 

$("#option1 img").animate({ 
    width: "175px", 
}, 1500); 


$("#option1").animate({ 
    left: "743px", 
}, 1500); 


$("#option2, #option3, #leftColumn").fadeIn(2000); 

$("#option1").css("zIndex", "1"); 

return this; 

} 

我試着運行這兩個功能的兩種方式，對2線和5線2的情況下觀看到showOption1（）會運行良好，但隨後只有

$("#option1").animate({ 
    left: "743px", 
}, 1500); 

將在延遲後從hideOption1（）中工作。 hideOption1（）的其餘部分在showOption1（）完成後立即觸發，忽略延遲。另一方面，如果我運行第5行，hideOption1（）中的所有代碼將根據需要同時運行，但會完全忽略延遲，在showOption1（）完成後立即運行。如何在延遲後同時運行hideOption1（）中的所有代碼？

非常感謝！

Answer 1

.delay()並不完全符合你想要做的事情，它會在選擇器匹配的每個元素的動畫隊列中添加一個延遲。所有動畫和延遲都是特定於元素的，而不是以任何方式綁定在一起運行或選擇器。由於你的.fadeOut()和.animate()有不同的時間（1000ms和1500ms），它們會延遲並開始下一個動畫不同步。

而且，沒有理由將這些功能在jQuery的對象，因爲你不使用this裏面做什麼，而不是我想只有這個：

​​

或者，有選擇實際使用的匹配（this），例如通過類隱藏其他選項。要一次運行隱藏動畫我會做的功能，如上面，然後就打電話給他們這樣的：

showOption1(); 
setTimeout(hideOption1, 4500); //3000 + 1500 from animation, adjust if needed 

Answer 2

與尼克的幫助下，我已經想通了！按照他的建議，我已經使用了setTimeout()，並且需要做一些數學計算來確定每個動畫的開始時間和持續時間。以下是我想出了：

var animationBuffer = 2000; //This is related to the 1500 ms I've specified for the length of the animations. I've simply added an extra half second buffer between the shinking of one option and the expanding of another. 
var firstOptionDuration = 6000; 
var secondOptionStart = animationBuffer + firstOptionDuration; 
var secondOptionDuration = secondOptionStart + 5000 
var thirdOptionStart = secondOptionDuration + animationBuffer; 
var thirdOptionDuration = thirdOptionStart + 4000 


showOption1(option1Text); 
setTimeout(hideOption1, firstOptionDuration); 
setTimeout(function() { 
    showOption2(option2Text) 
}, secondOptionStart); 
setTimeout(hideOption2, secondOptionDuration); 
setTimeout(function() { 
    showOption3(option3Text) 
}, thirdOptionStart); 
setTimeout(hideOption3, thirdOptionDuration); 


function showOption1(string) { 
    $("#option2, #option3, #leftColumn").fadeOut(1500); 


    $("#option1").css("zIndex", "5"); 


    $("#option1").animate({ 
     left: "370px", 
    }, 1500); 

    $("#option1 img").animate({ 

     width: "500px", 
    }, 1500, function() { 
     $("#option1 p").text(string); 
    }); 

} 


function hideOption1() { 
    $("#option1 p").text(' '); 

    $("#option1 img").animate({ 
     width: "175px", 
    }, 1500); 


    $("#option1").animate({ 
     //$(this).animate({ 
     left: "743px", 
    }, 1500); 


    $("#option2, #option3, #leftColumn").fadeIn(2000); 

    $("#option1").css("zIndex", "1"); 

} 

function showOption2(string) { 
    $("#option1, #option3, #leftColumn").fadeOut(1500); 

    $("#option2").css("zIndex", "5"); 


    $("#option2").animate({ 
     left: "370px", 
     top: "50px" 
    }, 1500); 

    $("#option2 img").animate({ 
     width: "500px", 
    }, 1500, function() { 
     $("#option2 p").text(string); 
    }); 
} 

function hideOption2() { 
    $("#option2 p").text(' '); 

    $("#option2 img").animate({ 
     width: "175px", 
    }, 1500); 


    $("#option2").animate({ 
     left: "743px", 
     top: "225px" 
    }, 1500); 


    $("#option1, #option3, #leftColumn").fadeIn(2000); 

    $("#option1").css("zIndex", "1"); 

} 

function showOption3(string) { 
    $("#option2, #option1, #leftColumn").fadeOut(1500); 

    $("#option3").css("zIndex", "5"); 

    $("#option3").animate({ 
     left: "370px", 
     top: "50px" 
    }, 1500); 

    $("#option3 img").animate({ 
     width: "500px", 
    }, 1500, function() { 
     $("#option3 p").text(string); 
    }); 
} 

function hideOption3() { 

    $("#option3 p").text(' '); 

    $("#option3 img").animate({ 
     width: "175px", 
    }, 1500); 


    $("#option3").animate({ 
     left: "743px", 
     top: "400px" 
    }, 1500); 


    $("#option2, #option1, #leftColumn").fadeIn(2000); 

    $("#option1").css("zIndex", "1"); 

} 

我甚組合顯示和隱藏功能，在顯示功能使用setTimeout()觸發隱藏功能，因爲我不希望使用一個節目沒有一個隱藏。

再次感謝您的幫助！