Problem with a for() loop

[riseguim]

Hi there,

this script here makes my pictures (put in div with ids "elem0", "elem1", "elem2", and on). The original script has been written so at the very last elem, it stops. I would like it to start again at elem 0, like a loop.

I have tried for the last 3 hours and it just doesn't work (please note that I am new to JavaScript).

$(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;

    for (i = 0, allElems = $('.FadingBanner').length, elemNoFade = allElems - 1; i < allElems; i+=1) {
        fadingElem = "#elem" + i;
        if (i === 0) {
            $(fadingElem).fadeIn(fadeTime).delay(delayTime).fadeOut(fadeTime);
        } else if (i === elemNoFade) {
            i=0;
        } else {
            $(fadingElem).delay(totalTime * i).fadeIn(fadeTime).delay(delayTime).fadeOut(fadeTime);
        }
    }
});

Thanks for your help,
Richard

[gon1387]

Hi riseguim,
can you please explain further?

Also when you say, "at the very last elem it stops", it doesn't:

    for (i = 0, allElems = $('.FadingBanner').length, elemNoFade = allElems - 1; i < allElems; i+=1) {
        fadingElem = "#elem" + i;
        if (i === 0) {
            $(fadingElem).fadeIn(fadeTime).delay(delayTime).fadeOut(fadeTime);
        // Once it reaches the last element, it restarts
        //  You got yourself an infinite loop :)
        } else if (i === elemNoFade) {
            i=0;
        } else {
            $(fadingElem).delay(totalTime * i).fadeIn(fadeTime).delay(delayTime).fadeOut(fadeTime);
        }
    }

I really don't know what your expected script output should be, but here's a workaround with the issue I brought up:

    for (i = 0, allElems = $('.FadingBanner').length; i < allElems; i+=1) {
        fadingElem = "#elem" + i;
        if (i === 0) {
            $(fadingElem).fadeIn(fadeTime).delay(delayTime).fadeOut(fadeTime);
        // Checks if it's the last element and increment 'i';
        //  so when it reaches the FOR's condition to continue
        //  it'll have the value of allElems; it's gonna 
        //  be checking (allElems+1 < allElems) which is false.
        } else if (allElems - 1) {
            i++;
        } else {
            $(fadingElem).delay(totalTime * i).fadeIn(fadeTime).delay(delayTime).fadeOut(fadeTime);
        }
    }

[riseguim]

Thanks for the reply,

The new code you brought in only load the first elem, then it fades out to nothing instead of the second elem.

This is my html:

<div id="elem0" class="FadingBanner">
    <img src="Images/MainBanner1.png" width="725" height="300" /></div>
    <div id="elem1" class="FadingBanner">
    <img src="Images/MainBanner2.png" width="725" height="300" /></div>

The script, along with a Jquery script (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js) is suppose to start with the first picture (elem0), then fade out to the second picture (elem1), and afterwards the script makes it stop at the last picture (in this case elem1). I would like it to, instead of stoping at the last one, to come back at the first one on and on.

Thank you again for your help!!
Richard

*EDIT: The elemNoFade function is the one that makes it stop. When I remove the Else If containing the elemNoFade, it fades again at the end but to nothing.

[AleMonteiro]

Hi, I'd try something like this:

function fadeElements() {
    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
        i=0,
        $elements = $('.FadingBanner'),
        elementsLength = $elements.length;

    $('.FadingBanner').each(function(){

        $(this) // Current element
            .delay( totalTime * i )
            .fadeIn(fadeTime)
            .delay(delayTime)
            .fadeOut(fadeTime);

        i = i + 1;
    });

    // Set to call the same function again after (totalTime * elementsLength) milliseconds
    setTimeout(fadeElements, totalTime * elementsLength);
}

$(function(){

    fadeElements();

});

Ps.: I didn't test any of this, but it should work (I Hope! ^^)

[riseguim]

Thanks again for your help! It's almost perfect, maybe I am being too demanding, but it starts again like I wanted, but at one point (elem0 fades to elem1, elem1 fades back to elem0, at this point) it fades to nothing, and thend fades back at elem0. It's like there's a little gap... Might you know how to fix this?

Again thank you so much for your help, I appreciate more than you can imagine!
Richard

[AleMonteiro]

Check this demo, I coded like an jQuery plugin:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
    $("#main").children().eq(0).fadeToNext(1000, 1000, 1000);
});

(function($){
    $.fn.extend({
        /*
            @fadeInTime Time of the FadeIn effect in milliseconds
            @shownTime Time between the finish of the FadeIn and the start of the FadeOut effect in milliseconds
            @fadeOutTime Time of the FadeOut effect in milliseconds
        */
        fadeToNext: function(fadeInTime, shownTime, fadeOutTime) {

            var 
                $this = $(this), // Current element 
                $siblingsAndSelf = $this.parent().children(); // All children of it's parent

            $this
                .fadeIn(fadeInTime) // Show Item
                .delay(shownTime) // Stay shown
                .fadeOut(fadeOutTime, function() { // Hide Item
                    // When finish hiding gets the next item to be shown
                    var 
                        $next = ($this.index() == $siblingsAndSelf.length-1) ? // If last children of parent
                                    $siblingsAndSelf.eq(0) : // First children of parent
                                    $this.next(); // Next sibling

                    // Show the next item
                    $next.fadeToNext(fadeInTime, shownTime, fadeOutTime); 
            });
        }

    });
}(jQuery));

</script>
</head>
<style type="text/css">

    #main{
        width: 100%;
        height: 100%;
        border:1px solid #FF0000;
        position:absolute;
    }

    #main > div {
        width: 200px;
        height: 200px;
        border: 2px solid black;
        position: absolute;
        border: 3px solid #FF0000;
        display: none;
        background: #00F;
        top: 50px;
        left: 50px;
        font-size: 70px;
        line-height: 200px;
        text-align: center;
        color: #fff;
    }

</style>
<body>

    <div id="main">
        <div>1</div> 
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>  
    </div>

</body>
</html>

Ps.:All itens to be faded needs to have the same parent, and all children of this parent will be faded

[riseguim]

Thank you so much for your help!!