Jquery fadein/fadeout problem in Chrome
Problem with fadein/fadeout in chrome using 1.6 and 1.6.1.
HTML
<div id="fun">
<a href="link1"><img src="http://www.atex.com/polopoly_fs/1.505.1294172851!/image/image.jpg_gen/derivatives/landscape_980/image.jpg" alt="" /></a>
<a href="link2"><img src="http://hydhopetravels.com/media/product_image.gif" alt="" /></a>
<a href="link3"><img src="http://www.dubaiic.com/images/980~220~2~ffffff~82~0~dic-v1-en~0/20071101_20071009-news-1.jpg" alt="" /></a>
</div>
JavaScript
(function ($)
{
// DOM READY EVENT
$(function ()
{
$("#fun").cycle();
});
$.fn.cycle = function (options)
{
return this.each(function ()
{
$.cycle(this);
});
};
$.cycle = function (container)
{
var elements = $(container).children();
if (elements.length > 1)
{
$(container).css('position', 'relative').css('height', 'auto');
for (var i = 0; i < elements.length; i++)
{
$(elements[i]).css('z-index', String(elements.length - i)).css('position', 'absolute').hide();
};
setTimeout(function ()
{
$.cycle.next(elements, 0);
}, 3000);
$(elements[0]).show();
}
};
$.cycle.next = function (elements, current)
{
var next = (current + 1) < elements.length ? current + 1 : 0;
// Animate transition
$(elements[next]).fadeIn(1000);
$(elements[current]).fadeOut(1000);
// Not a problem to use show and hide
// $(elements[next]).show();
// $(elements[current]).hide();
setTimeout(function ()
{
$.cycle.next(elements, next);
}, 3000);
};
})(jQuery);