javascript - jquery在一段时间后淡入屏幕

Question

嗨，伙计们，我想弄清楚如何在动画开始后经过一定时间后让图像出现在屏幕上。

所以我得到了一张图片，我用 css 把它放在我想要的地方。

#laser
{
   position: absolute;
   left: 650px;
}

任何人都知道我怎么可能让该图像在动画开始时不出现，而是在 3 秒后出现在我使用 css 放置它的某个地方？

编辑：这是我到目前为止得到的代码。

<div id="laser">
  <img src="images/laser.png" alt="laser">
</div>

#laser
{
   position: absolute;
   left: 650px;
   display: none;
}

然后我就使用了你给我的代码。但它只是阻止其他一切工作。

$('#laser').animate({
    width: '100px',
    height: '100px'
}, 3000, function() {
    $(this).show('slow');
});

如果您想查看它，请链接到我的代码：http: //jsfiddle.net/wdy5P/5/

score 2 · Accepted Answer

使用.animate()方法..在指定的持续时间后，回调中的代码将被执行..

$('#laser').animate({
    width: '100px',
    height: '100px'
}, 3000, function() {
    $(this).show('slow');
});

score 2 · Accepted Answer

添加一毫秒show()使其成为动画（肉眼不可见，但添加到 FX 队列中），然后您可以使用该delay()函数将显示的图像延迟 3000 毫秒（3 秒）：

$('#laser').delay(3000).show(1);

图像当然必须是最初的display: none;

2 回答 2