使用.delay使用jquery链接事件

Question

我正在尝试让一系列jQuery事件正常工作,所以我猜想我做错了什么.

我试图让一个gif图像出现在div中,停留几秒钟,然后淡出并在div中显示一个不同的随机图像.

由于涉及到cookie,所以这有点复杂,但我似乎有这个功能.

此时,gif图像和随机图像同时出现,然后两者同时淡出.我无法弄清楚为什么会发生这种情况,因为我正在链接事件并在它们之间使用.delay.

我有的是:

{
    $(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动画完成后调用的函数.

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