JQuery와 메이크업의 DIV를 반복 및 페이드 아웃

안녕하세요과 같이 for 루프에서 생성 된 div의 시리즈가 있습니다JQuery와 메이크업의 DIV를 반복 및 페이드 아웃

이

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


      };

내가 원하는 것은 각 페이드 아웃 completly 후 다시 페이드 만들어 DIV해야하는 것입니다 그리고이 과정이 영원히 계속 반복 될 수 있도록. .animate()를 사용하고 Complete : 속성에 대한 함수를 호출하려고하면 너무 많은 재귀와 페이지 나누기가 발생합니다. 어떻게합니까?

출처

2010-11-19 Dizzy Bryan High

....

' –

가 있습니까 당신은 내 예 브라이언을 이해? 해당되는 경우 코드에 적용됩니다. – Orbling

문제는 재귀 적으로 서로 내부에서 페이드 *() 루틴을 호출하므로 반복적으로 비 반복적으로 호출 할 수있는 시퀀스로 설정해야합니다.

이 꽤 깔끔한 방법 :

데모 여기 : 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); 
});

출처

2010-11-19 19:06:12 Orbling

긍정은 일하기 위해 그것을 fuinally 히 얻었다, 그렇게 많이 감사한다!! –

@Bryan 그것이 당신을 위해 일해 주어서 다행입니다. :-) – Orbling

어떻게 그만합니까? – trusktr

Pulse 플러그인을 사용해 보셨습니까? 데모 here.

출처

2010-11-19 18:53:19

그것은 특정 시간 동안 만합니까 ??? 나는 그것이 계속 될 필요가있다 –

당신이 게시하기 전에 검색을 했는가?

이 질문에 대한 대답은 올바른 방향으로 적어도 지점 당신이해야합니다 jQuery fadein fadeout repeatedly

출처

2010-11-19 19:06:58 Patricia

네, 검색 부하가 끝났지 만, 그 중 하나를 찾지 못했습니다. fadItIn이 정의되지 않았습니다. fadeItOut이 정의되지 않았습니다 ... –

fadeItOut 및 fadeitIn 함수를 페이지? – Patricia

JQuery와 메이크업의 DIV를 반복 및 페이드 아웃

답변

관련 문제