4

Why this function not work on ie 7 ,8 (delay and fadein) ?

on other browser are delay and fadein good.

But on ie all element show in same time (not delay and fadein).

http://jsfiddle.net/7u8qmdoo/2/

<script>
$(document).ready(function()
{    
    var i = 0;
    (function fadeInNext()
    {        
        $("#num" + i).fadeTo(1000,1);
        console.log("Fading in " + i);
        i++;
        if (i < 8)
        {
            setTimeout(fadeInNext, 2000);
        }
    })();
});
</script>
nomwery geqoilu
  • 109
  • 2
  • 10

1 Answers1

3

You can do this simpler using delay in a basic for loop, but you also need to use fadeIn instead of fadeTo as the opacity animation of fadeTo is not handled by IE7:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/7u8qmdoo/6/

$(document).ready(function()
{    
    for (var i = 0; i < 8; i++){
        $("#num" + i).delay(i * 2000).fadeIn(1000);
    }
});

This is the same as:

$("#num0").delay(0).fadeIn(1000,1);
$("#num1").delay(2000).fadeIn(1000,1);
$("#num2").delay(4000).fadeIn(1000,1);

etc

iCollect.it Ltd
  • 92,391
  • 25
  • 181
  • 202
  • Its the fading that is causing you grief in IE7... I will try find a better option for you. – iCollect.it Ltd Oct 07 '14 at 13:44
  • The update works for me in IE9/IE7 mode but just appears with no fade in IE9/IE8 mode. Gotta love IE. – James Montagne Oct 07 '14 at 13:55
  • @James Montagne: Gotta *something* IE. Appears to fade correctly in all but IE8 now :( – iCollect.it Ltd Oct 07 '14 at 13:56
  • It looks like the issue is with IE8 dealing with fading inline elements. [see here](http://stackoverflow.com/questions/3114516/does-jquerys-fadein-and-fadeout-not-work-with-ie-8). Setting them to `inline-block` fixes it, but of course then they're not hidden. I tried setting them `inline-block` and then hiding them in the js. That worked, but is pretty ugly. – James Montagne Oct 07 '14 at 15:04