jquery - 使用 .delay 与 jquery 链接事件

Question

我正在尝试让一系列 jQuery 事件正常工作，所以大概我做错了什么。

我试图让 gif 图像出现在 div 内，停留几秒钟，然后淡出并在 div 内显示不同的随机图像。

由于涉及 cookie，这有点复杂，但我似乎可以使用该功能。

此时，gif 图像和随机图像同时出现，然后同时淡出。我不明白为什么会发生这种情况，因为我正在链接事件并在它们之间使用 .delay。

我的js是:

{
    $(document).ready(function() {
        var images = ['1.gif', '2.gif', '3.gif', '4.gif'];
        var COOKIE_NAME = 'lucykydip_cookie';
        jQuerygo = jQuery.cookie(COOKIE_NAME);
        $("a.start").click(function() {
            $("a.start").hide();
            if (!jQuerygo) {
                $.cookie(COOKIE_NAME, 'ld_cookie');
                $('#luckydip').css("background-image", "url(ajax-loader.gif)").delay(5000).fadeOut("slow").delay(5000).html('<img src="' + images[Math.floor(Math.random() * images.length)] + '" style="width: 82px; height:82px; display: block;" />');

            }

            else {

                $('#luckydip').append('<p>Sorry, our records show that you have already received a voucher code!</p>');
}

感谢任何帮助!

谢谢

Answer 1

.delay() 仅影响动画队列。.html() 命令会忽略这些延迟。

因此您可以使用 .show() 的回调函数，该函数在显示动画完成后执行:

http://api.jquery.com/show/

.show( duration [, callback] )

duration A string or number determining how long the animation will run.

callback A function to call once the animation is complete.

.delay(5000)
.show(1, function(){ $(this).html("Hello World"); })