Question

a div has few image and the code below is showing one image at a time. it is just like slide show. i read the code but just do not understand how it is working. the code is tested and it is working. only one problem found that sometime animation run so fast. i just do not understand what is wrong in the code as a reason sometime images changes very fast in slide show.

here is html and jquery code

<div class="headerCarouselwrapper">
            <img src="http://www.bba-reman.com/NewSiteImages/new-bba-header-image1.jpg" />
            <img src="http://www.bba-reman.com/NewSiteImages/new-bba-header-image2.jpg" />
            <img src="http://www.bba-reman.com/NewSiteImages/new-bba-header-image3.jpg" />
            <img src="http://www.bba-reman.com/NewSiteImages/new-bba-header-image4.jpg" />
</div>

$(document).ready(function () { 
$('.headerCarouselwrapper img:gt(0)').hide();
    setInterval(function () {
        $('.headerCarouselwrapper :first-child').fadeOut()
        .next('img').fadeIn()
        .end().appendTo('.headerCarouselwrapper');
    }, 5000);
});

two things i need to know

1)how this code works. if possible then tell me how each like works

2) why sometime slide show animation run very fast.

thanks

Answer 1

1. The code is wrapped within a “ready” handler. The anonymous function bind to the “ready” event is execute once the DOM is loaded (the “load” event fires when all assets in a page are loaded – html, images, js, css…)

    $(document).ready(function () { 
        // executes when the DOM is ready
    });
   

   jQuery ready event

2. Hide all images except the first one:

   $('.headerCarouselwrapper img:gt(0)').hide();
   

   The pseudo selector allows matching elements with an index greater-then then one specified. .headerCarouselwrapper img finds all images in container and :gt(0) filters to have all except the first one.

   :gt() selector

3. Every 5 seconds, execute a function:

   setInterval(function () {
       // executes every 5000 milliseconds
   }, 5000);
   

   setInterval()

4. In the anonymous function executed every 5sec, takahe the first child of the container with class .headerCarouselwrapper (basically the visible image) and fade it out, get the next image with .next() and fade it in. Append the image that was faded out to the container to it cycles:

   // get first child in ".headerCarouselwrapper" which is the currently
   // visible image and fade it out
   $('.headerCarouselwrapper :first-child').fadeOut()
   // get the next <IMG> and fade it in
   .next('img').fadeIn()
   // get back the image that was faded out
   // and append it (move it) at the end of the container
   // so the slideshow cycle
   .end().appendTo('.headerCarouselwrapper');
   

   .end()
   .append()

---

About the problem of the fast animation

As you told in the comment, you are using jquery 1.6.2.

jQuery 1.6 introduced support for the API requestAnimationFrame (supported in FF and Chrome, but not IE I think). It has revealed to be problematic:

No more animation “worm holes”: We had high hopes for the browser’s
requestAnimationFrame API when we added support into version 1.6.
However, one of the highest-volume complaints we’ve received since
then relates to the way requestAnimationFrame acts when a tab is not
visible. All the animations initiated when the tab is invisible
“stack” and are not executed until the tab is brought back into focus.
Then they all animate at warp speed! We’ve removed support for this
API (which has no impact on the way you call jQuery’s animation
features) and plan to incorporate it into a future version of jQuery.

You should upgrade your jquery version to at least 1.6.3.

Source