Jquery 显示/隐藏div时出现问题

我试图在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>

$('#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
});

主要的问题是，当代码运行时，正好在div消失之前，您可以看到图像正在更改！但我想在它们不可见时将它们随机化！ 我用了不同的方法：

• 不同位置、不同部位的延时
• 使用addClass（“bla”，500）
• 显示（500）/隐藏（500）
• 淡出/淡出“赞助商幻灯片”

仅供参考，我正在尝试这个概念：

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

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

---

ps：它不褪色也能工作！但是我需要将它们淡入淡出。

您应该使用回调函数来防止显示更改。如果您想隐藏->更改->显示，您应该这样做：

<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>

$('#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（）

完成时才会出现。

MeLight，这正是我所需要的。我现在试过了，效果很好。Tnx:）