Question

我正在尝试编写一个相当简单的图库预览样式程序，如下所示：

$(document).ready(function() {
 $('#moving_photos').mouseover(function() {
    $('#img4').delay(1000).hide(500);
    $('#img3').delay(2000).hide(500);
    $('#img2').delay(3000).hide(500);
    $('#img2').delay(5000).show(500);
    $('#img3').delay(6000).show(500);
    $('#img4').delay(7000).show(500);
});

}）;

隐藏前三张图片后出现问题。在下一个图像再次显示之前有大约五秒的延迟，它看起来更像是重置功能而不是完成功能。您可以提供任何帮助。

Answer 1

delay()不适用于hide()和show()。它适用于fadeOut()和fadeIn()

 $('#moving_photos').mouseover(function() {
    $('#img4').delay(1000).fadeOut(500);
    $('#img3').delay(2000).fadeOut(500);
    $('#img2').delay(3000).fadeOut(500);
    $('#img2').delay(5000).fadeIn(500);
    $('#img3').delay(6000).fadeIn(500);
    $('#img4').delay(7000).fadeIn(500);
});

此外，如果您希望图像更快地淡出...

更改延迟时间。 1000等于1秒。

因此＃img4在开始淡入

之前有7秒的延迟

使用.show（）和.hide（）函数延迟jquery函数

1 个答案: