CODEWITHSUNDEEP
javascriptjqueryjquery-events
Sree
Sree

Reputation: 546

jQuery loop image fadeout/in with time interval

I have a jQuery function to fadeIn/Out images in a div. But when the function reaches last image, it gets stopped. Any way to get it in a loop, so that at the end of last image, it will start again from the first image. here is the code

HTML:

<div id="homeimg">
    <img src="image1.jpg" />
    <img src="image2.jpg" />
    <img src="image3.jpg" />
    <img src="image4.jpg" />
</div>

jQuery:

$(document).ready(function(){
   $('#homeimg img:first-child').addClass('activeimg');
   setInterval('cycleMe()', 4000);
});

function cycleMe() {
  $('.activeimg').next().css('z-index', 10);
  $('.activeimg').next().fadeIn(1500);
  $('.activeimg').fadeOut(1500, function(){
      $(this).next().fadeIn(0);
      $(this).next().addClass('activeimg');
      $(this).css('z-index', 5).removeClass('activeimg');
  });
 }

Any possibilities?

Upvotes: 0

Views: 1631

Answers (2)

Jason M. Batchelor
Jason M. Batchelor

Reputation: 2951

You can also do this with simple array manipulation:

$(document).ready(function () {
   $('#homeimg img:first-child').addClass('activeimg');
   setInterval(cycleMe, 4000);
   // get an array of your images
   var arrImgs = $('#homeimg img');

   function cycleMe() {
       var currImg = arrImgs[0];
       var nextImg = arrImgs[1];
       // You can do this with simple array splicing and pushing
       $(nextImg).css('z-index', 10);
       $(nextImg).fadeIn(1500);
       $(currImg).fadeOut(1500, function () {
           $(nextImg).fadeIn(0);
           $(this).css('z-index', 5);
           // remove the first item from the array
           arrImgs.splice(0,1);
           // add it to the end of the array
           arrImgs.push(currImg);
       });
   }
});

jsFiddle: http://jsfiddle.net/mori57/4FbVD/

Taking into consideration some of Ethan's comments, I also tried it this way:

http://jsfiddle.net/mori57/4FbVD/2/

$(document).ready(function () {
    $('#homeimg img:first-child').addClass('activeimg');
    setInterval(cycleMe, 4000);
    // get an array of your images
    var arrImgs = $('#homeimg img');

    function cycleMe() {
        var currImg = $(arrImgs[0]);
        var nextImg = $(arrImgs[1]);
        // You can do this with simple array splicing and pushing
        nextImg.fadeIn(1500);
        currImg.fadeOut(1500, function () {
            currImg.removeClass('activeimg');
            nextImg.fadeIn(0).addClass('activeimg');
            // remove the first item from the array
            arrImgs.splice(0,1);
            // add it to the end of the array
            arrImgs.push(currImg);
        });
    }
});

In my previous attempt, I was having to requery the DOM both for css change and fadeIn ... inefficient. Cache the jQuery object, /then/ do the manipulation, and sans-z-index as in Ethan's approach. I'd still rather not have to requery the DOM at all for each element inside an infinite loop. If I find a way around that, I'll post it as well.

Upvotes: 0

Ethan Brown
Ethan Brown

Reputation: 27282

First of all, you're passing the function in as a string, which is a no-no. I think you're over-complicating your code, and there are some jQuery efficiencies you can leverage.

First, I don't think it's necessary to modify the z-index of your images: the fading should handle all that. Secondly, you can chain jQuery calls (see below how fadeIn and addClass chained). Lastly, every time you do $('.activeimage'), jQuery has to scan the DOM again, which is inefficient. Best to do it once and cache the answer (whenever I store a jQuery object, I begin it with a dollar sign by convention, so I always know I'm dealing with a jQuery-wrapped object).

Here's how I would re-write this:

$(document).ready(function(){
    $('#homeimg img:first-child').addClass('activeimg');
    setInterval(cycleMe, 4000);
});

function cycleMe() {
    var $active = $('#homeimg .activeimg');
    var $next = $active.next('img');
    if(!$next.length) $next = $('#homeimg img:first-child');

    $active.fadeOut(1500, function(){
        $(this).removeClass('activeimg');
        $next.fadeIn().addClass('activeimg');
    });
 }

Working jsfiddle: http://jsfiddle.net/6MHDn/

Upvotes: 2

Related Questions