显示/隐藏 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 个。我想用淡入和淡出来显示它。一般来说，我正在尝试这段代码：

$('#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）
• 淡入/淡出“sponsorSlide”

仅供参考，我试图拥有这个概念：

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

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

ps：确实有效，不褪色！但我需要让它们淡入淡出。

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() 完成时才会发生。