Question

我试图在动画和转换盒的隐藏和可见之间进行切换之间的延迟，代码在没有延迟功能的情况下完美运行（但一切都立即加载），我在做延迟功能错了吗？ http://jsfiddle.net/qWszS/2/

Answer 1

您的代码存在许多问题。我对它做了一些修改，应该做同样的事情：

$(".go1").click(function(event){
    event.preventDefault();
    $(".go2, .go3, .go4, .go5, .go6").hide("slow");
    $(".go1").animate({top: "0", left: '60%'}, "slow").delay(2000).queue(function() {
       $(".hide, .transbox").css("visibilty", "visible");
    });
});

你没有为setTimout设置任何时间，所以我删除了它。如果要执行动画并稍后显示元素，可以将其重新添加。
我选择.go2 - .go6只有一个选择器。

修改：对示例进行了一些更正。

Answer 2

.delay()仅影响使用该特定对象的动画队列的操作。它不会影响该对象上不使用动画队列的方法，也不会影响其后对其他对象进行操作的其他代码行。

在jQuery的一个有趣的怪癖中，.hide()或.show()不使用动画队列，因此它不适用于.delay()，而是.hide(1)或{{1确实使用了动画队列，因此它可以与.hide("slow")一起使用。

因此，要在一段固定的时间内延迟对其他对象的操作，您可能希望使用setTimeout来安排将来的操作。要对操作进行排序，以便在完成操作时启动，请使用完成功能进行第一次操作。

这并不是100％清楚你想要做什么，但这个重写的代码将解决许多问题：

将所有隐藏操作合并为一个选择器。
为setTimeout添加了一个时间，因此它们是动画开始前隐藏后的延迟（因为看起来你想要超时）
我使用animate的完成功能代替.delay（）来触发下一个动作。

以下是代码：

.delay()

根据您的评论，这是一个非常简单的代码形式，在动画结束后显示框和隐藏按钮。这段代码（结合对HTML的一些更改）取代了你在小提琴中的所有代码：

$(".go1").click(function(event){
    event.preventDefault(); // prevent the link from changing the location
    $(".go2, .go3, .go4, .go5, .go6").hide("slow");
    setTimeout(function() {
        var done = false;
        $(".go1").animate({top: "0", left: '60%'}, "slow");}, 1500, function() {
            // completion function is call once for each object animating
            // make sure we only execute our code once
            if (!done) {
                $(".hide").css("visibility", "visible", 1000)
                $(".transbox").css("visibility","visible");
                done = true;
            {
        });
    }, 1000);
});

jsFiddle这里：http://jsfiddle.net/jfriend00/aKDgH/

如果您想在框显示之前再延迟一下，可以将代码更改为此并根据您的喜好调整setTimeout时间值：

$(".go").click(function(event){
    event.preventDefault();
    $(".go").not(this).hide("slow");
    $(this).animate({top: "0", left: '60%'}, "slow", function() {
        $(".transbox, .hide").css("visibility","visible");
    });
});

jsFiddle这里：http://jsfiddle.net/jfriend00/aKDgH/9/

Answer 3

延迟会延迟执行队列中的下一个操作，并将其设置为上一个操作。在.animate之前设置，它将延迟动画。

Answer 4

您正在设置超时，没有时间！

setTimeout(function() {

   $(".go1").animate({top: "0", left: '60%'}, "slow");},1500);
   $(".hide").css("visibility", "visible", 1000);
   $(".transbox").css("visibility","visible");


}, 2000); //time!

jquery延迟函数不会工作

4 个答案: