2010-11-19 15 views
10

merhaba ben şöyle döngü için oluşturulan div bir dizi var:jQuery yapmak div defalarca girip solmaya

var myDiv ='#bannerHolder' 
     var fib_str = '1, 2, 3, 5, 8, 13, 21, 1, 2, 3, 5, 8, 13, 21, 1, 2, 3, 5, 8, 13, 21, 1, 2, 3, 5, 8, 13' 
     var widths_str = '33px, 31px, 35px, 9px, 16px, 50px, 33px, 24px, 40px, 20px, 63px, 30px, 10px, 29px, 11px, 12px, 51px, 31px, 35px, 11px, 14px, 50px, 30px, 25px, 38px, 20px, 35px' 
     var pos_str = '0px, 44px, 105px, 144px, 153px, 203px, 236px, 269px, 280px, 354px, 374px, 437px, 447px, 457px, 506px, 517px, 529px, 604px, 646px, 687px, 698px, 712px, 762px, 787px, 823px, 895px, 915px' 
     var color_str = '#D5E1D7, #18D4C9,#BF51C3,#1E82C9, #EDEDED, #E1C981, #C9A94F, #BDBCAA, #5DB522, #EB2F34, #823133, #004BD8, #A6A0A0, #DS9F36, #FFDB00, #69944F, #18D4C9, #BF51C3, #1E82C9, #6B949A, #FFDB00, #819E64, #BDBCAA, #54BA43, #EB2F34, #823133' 
     var width = widths_str.split(","); 
     var pos = pos_str.split(","); 
     var color = color_str.split(","); 
     var fib = fib_str.split(","); 
     console.log(width); 
     console.log(pos); 
     console.log(color); 
     var counter = width.length 
     var stopper = false; 
for(i=0;i<counter;i++){ 
       var html = '<div id ="stripe'+i+'"/>' 
       $(myDiv).append(html) 
       $('#stripe'+i).css({ 'top': 0, 'left': pos[i],'position': 'absolute', 'float': 'left', 'background-color' : color[i]}) 
       $('#stripe'+i).attr({ 'min-width' : width[i], 'min-height' : '100px' }) 
       $('#stripe'+i).width(width[i]) 
       $('#stripe'+i).height('100px') 


      }; 

ne ben istediğiniz her fade out tamamen ardından tekrar solmaya oluşturulan div sahip olmaktır ve bu süreç için sonsuza kadar tekrarlı tutmak. .animate() işlevini kullanmayı denediğimde ve Complete için bir işlevi çağırırsam, özellik çok fazla özyineleme ve sayfa sonları alır, bunu nasıl yapabilirim

+2

'

....
' –

+0

mı benim örnek Bryan anladın mı? Eğer uyarlanmışsa kodunuz için çalışacaktır. – Orbling

cevap

18

Sorun, solda *() rutinlerini art arda çağırarak çağırıyor, diziyi yinelemeli olarak tekrar tekrar çağrılabilen bir şey olarak ayarlamanız gerekiyor.

Bu oldukça düzgün bir yöntemdir:

Demo burada: http://jsfiddle.net/ZZGhn/

$('.block').bind('fade-cycle', function() { 
    $(this).fadeOut('fast', function() { 
     $(this).fadeIn('fast', function() { 
      $(this).trigger('fade-cycle'); 
     }); 
    }); 
}); 

// This next block of code just sets all the triggers off at random times 
// The point is to start them using .trigger('fade-cycle'); 
// All can be started simultaneously with $('.block').trigger('fade-cycle'); 

$('.block').each(function(index, elem) { 
    setTimeout(function() { 
     $(elem).trigger('fade-cycle'); 
    }, index * 250); 
}); 
+0

olmak için ihtiyacım var evet fuinally çalışmak için var, çok teşekkürler! –

+0

@Bryan Glad sizin için çalıştı. :-) – Orbling

+0

Bunu nasıl durdurursunuz? – trusktr

2

Pulse eklentisini düşündünüz mü? Demo here.

+0

sadece belirli bir süre için yapar ??? Ben sürekli –

0

yayınlamadan önce bir arama yaptılar?

bu soru cevap doğru yönde en azından nokta olmalıdır: jQuery fadein fadeout repeatedly

+0

adresine bakın evet, bir sürü arama yaptım, ama bir tane bulamadım, fadItIn olsun undefined, fadeItOut undefined ... –

+0

fadeItOut ve fadeitIn işlevlerini eklediniz sayfa? – Patricia