Question

所以下面的代码使图像淡入，如何在淡入实际开始之前将此延迟7秒？这是代码;

jQuery的：

$(document).ready(function() {
$(".delayImg").each(function() {
    this.onload = function() {
        $(this).animate({opacity: 1}, 8000);
    };
    this.src = this.getAttribute("delayedSrc");
});
});

Answer 1

delay?

$(document).ready(function() {
  $(".delayImg").each(function() {
    this.onload = function() {
        $(this).delay(7000).animate({opacity: 1}, 8000);
    };
    this.src = this.getAttribute("delayedSrc");
  });
});

Answer 2

 setTimeout(function() {
          // Do something after 7 seconds
    }, 7000);

setTimeout的优点是您可以通过使用clearTimeout函数随时取消延迟：

var timer = setTimeout(function() {
              // Do something after 7 seconds
        }, 7000);
window.clearTimeout(timer); // Cancel the timer.

Answer 3

您可以使用jquery delay()或setTimeout()。这是 jsfiddle ，同时显示两者。

作为David Omid already pointed out，javascript超时更灵活，因为您可以取消它。 .delay()方法用于延迟排队的jQuery效果。

HTML：

<img id="delayImg1" class="delayImg" src="imgSource">
<img id="delayImg2" class="delayImg" src="imgSource">

Javscript：

var m_delayTimer = null;
var m_delayTime = 5000;
function showImage()
{
    $("#delayImg2").animate({opacity: 1}, 2000)
}

$(document).ready(function() {
    $("#delayImg1").each(function() {
        this.onload = function() {
           $(this).delay(m_delayTime).animate({opacity: 1}, 2000);
        };        
    });
    m_delayTimer = window.setTimeout(showImage,m_delayTime);
});

CSS：

.delayImg
{
    opacity:0;        
}

Answer 4

这里有类似的东西。用我认为可以实现的settimeout函数包装。

Delaying Javascript

如何在JQuery代码中添加延迟

4 个答案: