CODEWITHSUNDEEP
javascriptjqueryhtmlelementfadein
jondiaz
jondiaz

Reputation: 168

JQuery and Javascript fade not working

Jquery and Javascript do strange things. If you look to the code there is a "while" loop. It does 3 loops but only fades the last one (#c2).
Here is my code:

<div style="display:none" id="c0">Element 0</div>
<div style="display:none" id="c1">Element 1</div>
<div style="display:none" id="c2">Element 2</div>
<script>
var count = 0;
var exit = false;
var time = 300;

while(exit == false){
    if(document.getElementById("c" + count)){
        cual = "#c" + count;
        $(document).ready(function(){
            $(cual).fadeIn(time);
        });
    }
    else
        exit = true;
    count++;
    time += 100;
}

</script>

Upvotes: 2

Views: 81

Answers (3)

Cristik
Cristik

Reputation: 32785

The reason you see this is because the cual variable will hold the value #c3 by the time the callbacks execute. Because cual is defined within a global scope, and not the callback scope, it is not bounded to the callback scoe.

There is a workaround for this, by adding an intermediary function, something like this:

function scheduleFade(count) {
    var cual = "#c" + count;
    $(document).ready(function(){
       $(cual).fadeIn(time);
    });
}

while(exit == false) {
    if(document.getElementById("c" + count)) {
        scheduleFade(count);
    } else {
        exit = true;
    }
    count++;
    time += 100;
}

Upvotes: 3

feeela
feeela

Reputation: 29932

(Update based on comments)

The variable cual is overwritten on each loop, but the code inside the ondocumentready event listener is only executed after the DOM is fully loaded. At this point the variable cual is only set to the name of the third element.

You can create an own visibility scope for that variable to make it available inside the event listener callback:

var count = 0;
var exit = false;
var time = 300;

while(exit == false){
    if(document.getElementById("c" + count)){
        cual = "#c" + count;
        $(document).ready((function() {
            var elementToFadeIn = cual;
            return function() {
                $(elementToFadeIn).fadeIn(time);
            }
        })());
    }
    else
        exit = true;
    count++;
    time += 100;
}

Here the variable elementToFadeIn is set inside an immediately-invoked-function, which also returns the event listener callback. That way, the locally defined elementToFadeIn will stay with name passed in on the current loop iteration.

–––––

On the other you are using jQuery, why do need the loop in the first place?

Just include this code at the end of the page (i.e. before the closing BODY tag) and you don't need the ondocumentready event, as all relevant parts of the DOM are loaded right before the closing BODY tag.

var time = 1000;
jQuery( '[id^="c"]' ).fadeIn( time );

Upvotes: 0

Ropota Rafael
Ropota Rafael

Reputation: 85

The script is loaded after the DOM is loaded on the page, so you don't need to use $(document).ready(). I have tested the following script:

var count = 0;
var exit = false;
var time = 300;

while(exit == false){
    if(document.getElementById("c" + count)){
        cual = "#c" + count;
        $(cual).fadeIn(time);
    }
    else
        exit = true;
    count++;
    time += 100;
}

and it works.

Upvotes: 2

Related Questions