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()的时间不同（1000毫秒和1500毫秒），因此下一个动画的延迟和开始时间不同步。

此外，没有理由将这些函数放在jQuery对象中，因为你没有在里面使用this来做任何事情，而是我会这样做：

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

或者，让选择器匹配（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");

}

我甚至可以组合show和hide函数，在show函数中使用setTimeout()来触发hide函数，因为我不希望使用没有hide的show。

再次感谢您的帮助！

jQuery：多个动画，在一组div上有延迟

2 个答案: