Question

My image rotation works fine when the focus is on that page(I am using Google Chrome). But when I open another tab and view some other page, and when I return back to my page(clicks on the tab that has my page loaded), the image rotation is somewhat speedy !

I use fadeIn() and fadeOut() to show and hide images. Also, the code for this is enclosed in another function which is initiated using setTimeout() on $(document).ready() and a setTimeout() is used in the end of the function too (the function that I mentioned previously).

How to solve this ?

EDIT

Code used:

    var initialFadeIn = 1000;
    var itemInterval = 5000;
    var fadeTime = 2500;
    var numberOfItems = 0;
    var currentItem = 0;

    $(document).ready(function() {

        numberOfItems = $('.banner-img').length;
        $('.banner-img').eq(currentItem).fadeIn(initialFadeIn);

        var imgTitle = $('.banner-img').eq(currentItem).attr('title');
        $('.banner-title').text(imgTitle);

        setTimeout(imgLoop, itemInterval);

    });

    function imgLoop()
    {
        $('.banner-img').eq(currentItem).fadeOut(fadeTime);

        if(currentItem == numberOfItems -1){
            currentItem = 0;
        }else{
            currentItem++;
        }
        $('.banner-img').eq(currentItem).fadeIn(fadeTime);

        imgTitle = $('.banner-img').eq(currentItem).attr('title');
        $('.banner-title').text(imgTitle);

        setTimeout(imgLoop, itemInterval);
    }

Answer 1

Solution:

As turzifer suggested, I used cycle plugin: http://jquery.malsup.com/cycle/

And to display captions above the image, I used:

<script type="text/javascript">
$(function() {
$('#slideshow').cycle({
    fx:       'fadeZoom',
    timeout:   2000,
    before:     function() {
        $('#caption').html(this.alt);
    }
});
});
</script>

Like in this example: http://jquery.malsup.com/cycle/caption.html (view page source to see the code)