2

我试图在加载图像后引入延迟，但它一直跳过 .delay()

$(\"#output\").html(\"<center><img src='http://i.imgur.com/GM6KJdh.gif' /></center>\").delay(5000);

我已经尝试了上述代码的许多版本，但它仍然有效

感谢帮助的家伙。

4

4 回答 4

1

AFAIK 该delay()函数只是延迟了随后队列中的函数。所以你需要在delay().

也许你可以试试

.delay(5000).finish();
于 2013-01-19T12:02:58.263 回答
1

来自jQuery 文档

.delay() 方法最适合在排队的 jQuery 效果之间进行延迟。因为它是有限的——例如，它不提供取消延迟的方法——.delay() 不能替代 JavaScript 的本机 setTimeout 函数，这可能更适合某些用例。

您的图像正在加载，然后触发延迟，然后......接下来会发生什么取决于您。但是由于 .delay 附加到#output，你只能对 .delay 做一些事情#output。例如，您可以将其淡出。

$("#output").html("<center><img src='http://i.imgur.com/GM6KJdh.gif' /></center>").delay(5000).fadeOut();

http://jsfiddle.net/M2GRj/

如果您想在加载图像之前有延迟，请在设置 html 之前使用延迟。

$("#output").hide().delay(5000).html("<center><img src='http://i.imgur.com/GM6KJdh.gif' /></center>").fadeIn();

http://jsfiddle.net/M2GRj/3/

如果您想在图像加载后引起暂停，然后再进行一些独立的操作，请为您的图像提供一个 ID，并在加载事件上调用一个带有 setTimeout 的函数。

$("#output").html("<center><img id='img1' src='http://i.imgur.com/GM6KJdh.gif' /></center>");
// Note: You can only use this after #img1 has been added to the DOM
$('#img1').load(function(){setTimeout('alert("hello")',5000);});

http://jsfiddle.net/M2GRj/5/

于 2013-01-19T12:04:35.660 回答
1

正如 jQuery 文档中所解释的，.delay()它是一种 jQuery 动画方法，它只会延迟后续动画（在同一元素上），它不会延迟非动画方法的结果，也不会“暂停”代码执行。因此，您在所示代码行之后的任何代码行都将立即执行。

假设您要做的是在执行下一行之前等待两秒钟，您可以这样做：

$("#output").html("<center><img src='http://i.imgur.com/GM6KJdh.gif' /></center>");
setTimeout(function() {
   // your other code here
}, 2000);

这使用 JavaScript 的内置setTimeout()函数来延迟执行您在传递给它的函数中放置的任何代码。

于 2013-01-19T12:06:46.613 回答
0

jQuery API 说：

.delay() 方法允许我们延迟队列中跟随它的函数的执行。它可以与标准效果队列或自定义队列一起使用。只有队列中的后续事件被延迟

作为一个例子检查下面

执行以下语句时，元素向上滑动 300 毫秒，然后暂停 800 毫秒，然后淡入 400 毫秒。 

$('#foo').slideUp(300).delay(800).fadeIn(400);

如果您在延迟后没有任何后续事件，那么您可以使用JavaScript's native setTimeout function

如何使用setTimeout function？

setTimeout(function() {
  //your code
}, 2000);  // will work with every browser

有关更多信息，请检查.delay()和setTimeout

于 2013-01-19T12:09:14.870 回答