显示/隐藏div的问题

Question

我试图在div中显示一些随机图像.我的HTML代码是这样的:

<div class="sponsors">
<div id="sponsorsContent">
    <div class="spacer"></div>
    <div class="sponsorSlide" id="imgageSlide_1">
        <img alt="" src="<?php echo $this->baseUrl(); ?>/img/Sponsors/img_1.jpg" /><br />
        <span class="thumbnail-text">Image Text</span>
    </div>
    <div class="spacer"></div>
    <div class="sponsorSlide" id="imgageSlide_2">
        <img alt="" src="<?php echo $this->baseUrl(); ?>/img/Sponsors/img_2.jpg" /><br />
        <span class="thumbnail-text">Image Text</span>
    </div> ... </div></div>

我试图首先洗牌"sponsorSlide"div,然后随机选择其中的7个.我想用fadeIn和fadeOut来显示它.一般来说,我正在尝试这段代码:

$('#sponsorsContent').addClass('horizontal');
$('#sponsorsContent div').addClass('hidden').removeClass('visible');
$('#sponsorsContent .sponsorSlide').rand(7).removeClass('hidden');
setInterval(function(){
    $('#sponsorsContent').fadeOut(500);
    $('#sponsorsContent .sponsorSlide').delay(500).addClass('hidden').removeClass('visible').shuffle();
    $('#sponsorsContent .sponsorSlide').rand(7).removeClass('hidden').addClass('visible');                  
    $('#sponsorsContent').fadeIn(1500);
}, 5000);

主要问题是,当代码运行时,恰好在div淡出之前,你可以看到图像正在改变!但是当它们不可见时我想随机化它们!我用了不同的方法:

• 延迟不同的位置和不同的部分
• 使用addClass("bla",500)!
• 查看(500)/隐藏(500)
• fadeIn/fadeOut"sponsorSlide"

仅供参考,我想尝试这个概念:

1-显示一些随机图像2-淡出3-随机图像4-选择7个随机div 5-fade in 6-go 2

有没有人知道我的主要错误是什么？我是以错误的方式做某事吗？我很困惑,我真的想知道,我应该尝试哪种方式以及如何管理它以我想要的方式工作？

ps:没有fadings它确实有效!但我需要淡入淡出它们.

Answer 1

您应该使用回调函数以防止更改显示.如果你想隐藏 - >更改 - >显示,你应该这样做:

$('#image_div').fadeOut(500, function() { //first fade out!
    $('#image_div img').attr('src', 'image.jpg'); //only then change the picture
    $('#image_div').fadeIn(500);   //and fade in
});

随之而来的function(){//code}会发生,只有当fadeOut()完成.