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()触发隐藏功能，因为我不希望使用一个节目没有一个隐藏。

再次感谢您的帮助！