jQuery: plusieurs animations avec un délai sur un ensemble de divs

Question

J'ai un groupe de 4 divs et je cherche à utiliser jQuery pour les animer une fois, puis avoir un délai en utilisant delay(), puis exécuter un autre ensemble de animations sur eux, remettant les divs à leur configuration d'origine. Voici le code que j'ai:

//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; 

} 

J'ai essayé deux façons de gérer ces deux fonctions, comme on le voit sur les lignes 2 et 5. Dans le cas de la ligne 2, showOption1() fonctionnera bien, mais seulement

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

fonctionnera à partir de hideOption1() après le délai. Le reste de hideOption1() est déclenché immédiatement après la fin de showOption1(), en ignorant le délai. D'autre part, si j'exécute la ligne 5, tout le code dans hideOption1() s'exécute simultanément comme souhaité, mais ignore complètement le délai, s'exécutant immédiatement après la fin de showOption1(). Comment puis-je avoir tout le code dans hideOption1() exécuté simultanément après le délai?

Merci beaucoup d'avance!

Answer 1

.delay() ne correspond pas exactement ce que vous essayez de faire, il ajoute un retard dans la file d'attente d'animation sur chaque élément que les matchs de sélection. Toutes les animations et les retards sont spécifiques à l'élément, non liés à l'exécution simultanée ou au sélecteur de quelque façon que ce soit. Puisque vous êtes .fadeOut() et .animate() ont des temps différents (1000ms et 1500ms), ils retardent et le début de l'animation suivante est désynchronisé.

En outre, il n'y a aucune raison de mettre ces fonctions dans l'objet jQuery, puisque vous ne l'utilisez this l'intérieur à quoi que ce soit, au lieu que je ferais tout simplement avoir ceci:

function showOption1(){ ...code... } 
//and 
function hideOption1(){ ...code... } 

Ou bien, avoir le sélecteur correspond (this) réellement utilisé, cachant les autres options via une classe par exemple. Pour exécuter les animations masquer tout à la fois, je ferais les fonctions comme ci-dessus, il suffit de les appeler comme ceci:

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

Answer 2

Avec l'aide de Nick, je l'ai pensé à elle! J'ai utilisé setTimeout() comme il a suggéré et a dû faire un peu de maths pour comprendre l'heure de début et la durée de chaque animation. Voici ce que je suis venu avec:

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"); 

} 

Je peux même combiner le spectacle et se cacher des fonctions, en utilisant setTimeout() dans la fonction show pour déclencher la fonction cacher, car je ne pense pas à utiliser un spectacle sans se cacher.

Encore une fois, merci pour votre aide!