1

我在http://kaidez.com/javascript-for-loop-creates-jquery-fade/上关注了一个教程，并且正在研究另一个用户发布的关于使循环连续的内容。

我试图使序列连续循环，由于某种原因，我无法弄清楚为什么它适用于 1.5 循环，然后项目开始以不正确的顺序淡入淡出。它在第一个循环中正确淡入淡出，然后第二个循环中的第 4 个项目在后期淡入淡出，然后在那之后一切都关闭了。

jQuery

(function($){

     var yourFade = 1, // the amount of time in seconds that the elements will fade in AND fade out
     yourDelay = 2, // the amount of time in seconds that there will be a delay between the fade ins and fade outs
     fadeTime = yourFade * 1000, //convert fade seconds to milliseconds (1000)
     delayTime = yourDelay * 1000, // convert delay seconds to milliseconds (2000)
     totalTime = fadeTime + delayTime, //3000 milliseconds...needed for all those delays we talked about
     allElems, // find out exactly how many page elements have the 'toBeFaded' class (4)
     elemNoFade, // Will help us find the last element represent the last element (3)
     i,
     fadingElem;
     allElems = $('.toBeFaded').length

    function fadeit(){
        for (i = 0, allElems = $('.toBeFaded').length, elemNoFade = allElems - 1; i < allElems; i+=1) {

            fadingElem = "#elem" + i;           

            $(fadingElem).delay(totalTime * i).fadeIn(fadeTime).delay(delayTime).fadeOut(fadeTime);
        }
    }
    fadeit();
    setInterval(fadeit,totalTime*allElems);


    })(jQuery);

CSS

.toBeFaded {
display: none;
position:absolute;
font-size:70px;
color:white;
}

HTML

<div id="elem0" class="toBeFaded">Message 1</div>
<div id="elem1" class="toBeFaded">Message 2</div>
<div id="elem2" class="toBeFaded">Message 3</div>
<div id="elem3" class="toBeFaded">Message 4</div>

谢谢您的帮助！几个小时以来，我一直在尝试解决这个问题，但没有运气。

4

0 回答 0