JQuery: несколько анимаций с задержкой на наборе дел

Question

У меня есть группа из 4 делителей, и я хочу использовать 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

С помощью Ника, я понял это! Я использовал 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() в функции показа для запуска функции скрытия, поскольку я не ожидаю использовать показ без скрытия.

Еще раз спасибо за вашу помощь!

Answer 2

.delay() не совсем соответствует тому, что вы пытаетесь сделать, оно добавляет задержку в очереди анимации на каждый элемент , которому соответствует селектор. Все анимации и задержки специфичны для элемента, не привязаны к запуску вместе или к селектору каким-либо образом. Поскольку у вас .fadeOut() и .animate() разное время (1000 мс и 1500 мс), они задерживаются, и начало следующей анимации не синхронизировано.

Кроме того, нет смысла помещать эти функции в объект jQuery, поскольку вы не используете this внутри для каких-либо действий, вместо этого я бы просто получил:

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

Или, альтернативно, использовать фактически выбранные селекторные совпадения (this), например, скрывая другие опции через класс. Чтобы сразу запустить анимацию скрытия, я бы выполнил функции, описанные выше, а затем просто вызвал бы их так:

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