0

我有一组 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() 中的所有代码同时运行？

提前非常感谢！

4

2 回答 2

0

.delay()不完全适合您要执行的操作，它会在选择器匹配的每个元素的动画队列中添加延迟。所有的动画和延迟都是特定于元素的，不会以任何方式绑定到一起运行或选择器。由于您的.fadeOut()时间.animate()不同（1000 毫秒和 1500 毫秒），它们会延迟并且下一个动画的开始不同步。

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

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

或者，让选择器匹配 ( this) 实际使用，例如通过类隐藏其他选项。要一次运行隐藏动画，我会执行上面的函数，然后像这样调用它们：

showOption1();
setTimeout(hideOption1, 4500); //3000 + 1500 from animation, adjust if needed
于 2010-05-16T18:51:57.733 回答
0

在尼克的帮助下，我想通了！我已经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()在显示功能中使用来触发隐藏功能，因为我不希望使用没有隐藏的显示。

再次感谢您的帮助！

于 2010-05-17T01:07:51.077 回答