images are getting clipped when Jquery animate opacity is used in IE
- by Raja
I use the function given below:
function rotate() {
//Get the first image
var current = ($('div#rotator ul li.show') ? $('div#rotator ul li.show') : $('div#rotator ul li:first'));
//Get next image, when it reaches the end, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') : current.next()) : $('div#rotator ul li:first'));
//Set the fade in effect for the next image, the show class has higher z-index
next.css({ opacity: 0.0 })
.addClass('show')
.animate({ opacity: 1.0 }, 1000);
//Hide the current image
current.animate({ opacity: 0.0 }, 1000)
.removeClass('show');
};
It does a slide show of images. It works perfect on Firefox and Google Chrome but clips the images in IE 7 and IE 8. Any help is much appreciated.
Thanks in advance.
