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-淡入 6-去2

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

ps：没有时尚，它确实有效！但我需要淡入淡出它们。

Answer 1

您应该使用回调函数以防止更改显示。如果你想隐藏 - ＆gt;改变 - ＆gt;显示，你应该这样做：

$('#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()内容。

显示/隐藏div的问题

1 个答案: