Question

Could anyone eplain to me, why this isn’t working in IE?
It’s fading perfectly into each image in other browsers, but when executed in IE, it only shows the last image(image 5) and stays that way.
And maybe come up with a possible solution ? I am very new to jquery
JS:

var rotationTime = 3000;
var fadeTimer = 500;
var zStart = 25;

var totalBanners;
var currentImage = 1;

$(document).ready(function(){
    totalBanners = $('#fade-slider > div').length;
    for(i=1;i<=totalBanners;i++){
        $('#img-' + i).css('z-index', '' + (zStart-i) + '');
    }
    $(document).everyTime(rotationTime,  'imagefader', function(){          
        if(currentImage < totalBanners){
            $('#img-' + currentImage).animate({opacity: 0}, fadeTimer);
            currentImage += 1;
        }
        else{
            currentImage = 1;
            $('#img-' + currentImage).animate({opacity: 1}, fadeTimer, 'linear', function(){
                for(i=1;i<=totalBanners;i++){
                    $('#img-' + i).animate({opacity: 1}, 0);
                }
            });         
        }       
    }, 0);
});

CSS:

@charset "UTF-8";
    #fade-slider {
      width:570px;
      height:207px;
      overflow:hidden;
      margin:0px;
      padding:0px;
      position:relative;
    }

    .position-zero {
        position:absolute;
        top:0px;
        left:0px;
    }

HTML:

<div id="fade-slider">
                        <div id="img-1" class="position-zero"><a href="#"><img src="images/slider/image-1.jpg" alt="Image1" /></a></div>
                        <div id="img-2" class="position-zero"><a href="#"><img src="images/slider/image-2.jpg" alt="Image2" /></a></div>  
                        <div id="img-3" class="position-zero"><a href="#"><img src="images/slider/image-3.jpg" alt="Image3" /></a></div>    
                        <div id="img-4" class="position-zero"><a href="#"><img src="images/slider/image-4.jpg" alt="Image4" /></a></div>     
                        <div id="img-5" class="position-zero"><a href="#"><img src="images/slider/image-5.jpg" alt="Image5" /></a></div>       
                    </div>

Answer 1

I believe you’re taling about IE8 – when mentioning IE …

opacity

will not work properly in IE8 , try something like this

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

that last part ‘Opacity=50’ would equal opacity: .5 just adjust accordingly

for IE5- IE7 try this

filter: alpha(opacity=50);