jQuery crossfading div's Win XP IE 8 issue

JavaScript
1

I’m trying to figure out an IE issue with an ultra simple jQuery block of code that fades a stack of divs that are basic information banners.

Here’s the basic premise:

  1. Each information banner is a absolutely positioned (0,0) div with a background image, headline (h2), info paragraph (p), and a foreground image. The banner divs are of the class .views-row and also have a unique class applied to them like views-row-1, views-row-2, etc…

  2. All of the banners get loaded via a content management system into a container (#banner) and I use CSS to make them display:none.

  3. Then I use jQuery to check if there are any banner and if so fadeIn the first banner and then use setInterval() to call a function to fade the existing one out and the next one in line in; views-row-1, views-row-2, etc…

This works just fine and dandy in anything on the Mac and not bad in Win Vista/7 however in IE 8 on Windows XP the fading is extremely clunky and text parts seem to hang before completely fading out.

Code:


<script type="text/javascript">
    $(function () {
        var timeout = 15000; // 15 Seconds 
        var bannernum = $('#banner .views-row').length;
        var currentnumber;
        var nextnumber;
        var intervalID;
            
        // If the are any banners to show, fade the first banner in and call the myslider function
        if(bannernum > 0) {
            currentnumber = 1;
            $('#banner .views-row-first').fadeIn(500);
            intervalID = setInterval(myslider, timeout);
        }
        
        function myslider(direction){
            if(!direction) {
                if(currentnumber < bannernum) {
                    nextnumber = currentnumber+1;
                } else {
                    nextnumber = 1;
                }
            } else {
                if(currentnumber > 1) {
                    nextnumber = currentnumber-1;
                } else {
                    nextnumber = bannernum;
                }
            }

            currentclass = '#banner .views-row-' + currentnumber;
            nextclass = '#banner .views-row-' + nextnumber;
            $(nextclass).fadeIn(2500);
            $(currentclass).fadeOut(2500);

            currentnumber = nextnumber;

        }
        

        /** 
         * Next and previous buttons for cycling through the banners manually
         */

        // Next Banner
        $("a.nextlink").click(function () {
            if(intervalID) {                            
                clearInterval(intervalID);
            }
            myslider();
            intervalID = setInterval(myslider, timeout);
        });
        
        // Previous Banner
        $("a.prelink").click(function () {
            if(intervalID) {                            
                clearInterval(intervalID);
            }
            myslider('previous');
            intervalID = setInterval(myslider, timeout);
        });
    
      });
</script>

Any obvious ideas?

Thanks,
Andrew

2

Update: I sort of resolved it by making the banner that is being faded in a higher z-index than the one being faded out but it’s still a bit clunky so I’m open to suggestions.

The fix:


        function myslider(direction){
            if(!direction) {
                if(currentnumber < bannernum) {
                    nextnumber = currentnumber+1;
                } else {
                    nextnumber = 1;
                }
            } else {
                if(currentnumber > 1) {
                    nextnumber = currentnumber-1;
                } else {
                    nextnumber = bannernum;
                }
            }
            currentclass = '#banner .views-row-' + currentnumber;
            nextclass = '#banner .views-row-' + nextnumber;
            $(nextclass).css({zIndex:99}).fadeIn("slow");
            $(currentclass).css({zIndex:92}).fadeOut("slow");
            currentnumber = nextnumber;
        }