divの表示/非表示に関する問題

Question

divにランダムな画像をいくつか表示しようとしています。私が最初にシャッフル「sponsorSlide」divをしようとした後、ランダムに7を選択しています

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

：私のHTMLコードは、このようなものです。私は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）： 私はさまざまな方法を使用しました！
• FYIショー（500）/非表示（500）
• フェードイン/フェードアウト "sponsorSlide"

、私はこの概念を持ってしようとしています：

いくつかのランダムな画像 2を示す

の1- - 、6-行く2

で7つのランダムのdivに 、5-フェードを選択し 、4- 、3-シャッフル画像をフェードアウト誰が、何が私の主な間違いであることを任意のアイデアを持っていますか？間違ったやり方で何かしていますか？ 私は混乱してしまいました。私は実際に何を試してみて、どのように私が望むようにそれを管理できるかを知りたいですか？

ps：色あせずに動作します！しかし、私はそれらをフェードアウトする必要があります。

Answer 1

変更が表示されないようにするには、コールバック関数を使用する必要があります。 >変更 - - 非表示にしたい場合は>ショーを、あなたはこのようにそれを行う必要があります：function(){//code}にしてい

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

何​​が終了した場合にのみ発生します。