2011-07-20 34 views
6

Bir rastgele görüntüyü bir div içinde göstermeye çalışıyorum. Benim HTML kodu şu şekildedir: İlk shuffle "sponsorSlide" div saldırması ve daha sonra rasgele bunlardan 7 seçmek amTanıtımı gösterme/gizleme sorunu

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

. Ben fadeIn ve fadeOut ile göstermek istiyorum. Genellikle, bu kodu çalışıyorum:

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

ana sorundur, kod çalıştığında div gizlenir önce, tam olarak, görüntüler değişiyor görebiliyorum! Ama görünür olmadıkları zaman onları rasgele hale getirmek istiyorum! farklı pozisyonlarda

  • Gecikme ve farklı bölümlerini
  • Kullanım AddClass ("bla", 500): Ben farklı yollar kullanılır!
  • göster (500)/Gizle (500)
  • fadeIn/fadeOut "sponsorSlide" Bilginize

, ben bu kavramı var çalışıyorum: Bazı rastgele görüntüleri gösteren

1- 2 - 5- 6- fade herkes benim ana hata nedir dair herhangi bir fikri var mı 2

gitmek 3- karıştır görüntüleri 4- seç 7 rastgele div'ler fade out? Yanlış bir şey mi yapıyorum? Kafam karıştı ve gerçekten öğrenmek istediğimi, hangi şekilde denemeyi ve istediğim şekilde çalışmayı nasıl başarabileceğimi öğrenmek istiyorum.

ps: Bu, solmadan çalışır! Ama onları içeri ve dışarı kaydırmam gerek.

cevap

5

Değişikliğin görüntülenmesini önlemek için geri arama işlevi kullanmalısınız. Eğer gizlemek isterseniz -> değişimi -> göstermek, sen böyle yapmak gerekir: fadeOut() bittiğinde function(){//code} geliyor ne

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

SADECE gerçekleşecek.

+0

MeLight, Tam ihtiyacım olan buydu. Şimdi denedim ve işe yarıyor. Tnx :) – Dijam

+0

Çok hoşgeldiniz :) – MeLight