Question

大家好我试图做一个简单的动画但有一些延迟，但它不起作用请帮我一把。这是代码

$(document).ready(function() {
    $('.detailsholder').hide()
    $(".detailsholder").animate({"top": '-520px'},1)
    $('.detailsholder').hide()
    $('.detailsholder').fadeIn(500)
    $('.detailsholder').delay(5000).animate({'top': "-260px",'easing': "easeInElastic"}, 400).delay(5000).('.detailsholder').animate({'top': "0px",'easing': "easeInElastic"},400);
});

Answer 1

$(function(){
    $('.detailsholder').hide().animate({"top": '-520px'},1).fadeIn(500).delay(5000).animate({'top': "-260px",'easing': "easeInElastic"},400).delay(5000).animate({'top': "0px",'easing': "easeInElastic"},400);
});

Answer 2

我假设您希望在动画完成后发生每个delay()，在这种情况下，您应该将其放入回调中。就像现在一样，延迟将在动画发生时运行。

此外，正如评论所说，你应该真正链接你的陈述并在你的行结尾添加分号。

Answer 3

你的代码第6行出了问题（为了更好的阅读，我把这行分成了几行：

$('.detailsholder')
.delay(5000)
.animate({'top': "-260px",'easing': "easeInElastic"}, 400)
.delay(5000)
.('.detailsholder') // The method is missing here!
.animate({'top': "0px",'easing': "easeInElastic"},400);

注意：您还应该链接jQuery代码并在每个命令后添加分号。

Answer 4

您也可以对事件进行排队，因为延迟仅适用于动画队列。

我创造了这个小提琴：http://jsfiddle.net/scaillerie/Veg59/1/。

您还可以查看其他帖子：How to delay jquery animation?。

Answer 5

这里有 solution ;

$('.detailsholder')
    .hide()
    .css('top', '200px')
    .fadeIn(500)
    .delay(2000)
    .animate({'top': "100px", 'easing': "easeInElastic"}, 400)
    .delay(2000)
    .animate({'top': "0px", 'easing': "easeInElastic"}, 400);

您可以考虑使用ID而不是类，因为您的动画看起来非常独特。

享受！：）

Jquery延迟不起作用

5 个答案: