CODEWITHSUNDEEP
javascriptjqueryhtml
R2D2
R2D2

Reputation: 2640

jquery crossfade two divs together in same function

I have a rotating / fading div in jquery, which is working well, but I now want it to do the same to a second div on the same page, but cant get that to work.

My current code is:

$(window).load(function() {
setInterval('cycleImages()', 5000);
})

function cycleImages() {
var $active = $('#main-photo-area .active');
var $next = ($('#main-photo-area .active').next().length > 0) ? $('#main-photo-area .active').next() : $('#main-photo-area div:first');
$next.css('z-index', 2);
$active.fadeOut(1500,function() {
  $active.css('z-index', 1).show().removeClass('active');
  $next.css('z-index', 3).addClass('active');
});
}

Which works fine and crossfades the div id="main-photo-area" fine, by changing the z-indexes of the divs within the container.

I now also want the same piece of code to fade another set of divs, eg: id="second-photo-area".

Can anyone see how I can alter this cycleImages() script to fade both div sets at the same time, without needing to add another routine to do this?

I know there are plenty of other ways to do this, but I want to be efficient with the code that is there already, and not add another routine if possible.

Thanks in advance.

Upvotes: 0

Views: 756

Answers (2)

Terry
Terry

Reputation: 66208

One possible way to do it is to give all photo areas a common class name, say photo-area, and then use .each() to iterate through each instance:

$(window).load(function() {
    setInterval(cycleImages, 5000);
})

var cycleImages = function() {
    $('.photo-area').each(function() {
        var $active = $(this).find('.active'),
            $next = ($active.next().length > 0) ? $active.next() : $(this).find('div:first');

        $next.css('z-index', 2);
        $active.fadeOut(1500,function() {
            $active.css('z-index', 1).show().removeClass('active');
            $next.css('z-index', 3).addClass('active');
        });
    });
}

Some changes I have made to your code:

  • Declare the function as a variable, and call it by its variable name directly in setInterval()
  • Take advantage of cached jQuery objects and refer to $active when defining $next, to save effort of looking through DOM nodes for element(s) of interest.

Upvotes: 2

Gaurav Kalyan
Gaurav Kalyan

Reputation: 1897

You can change your function in following way:

function cycleImages(val) {
    var $active = $('#' + val + ' .active');
    var $next = ($('#' + val + ' .active').next().length > 0) ? $('#' + val + ' .active').next() : $('#' + val + ' div:first');
    $next.css('z-index', 2);
    $active.fadeOut(1500, function () {
        $active.css('z-index', 1).show().removeClass('active');
        $next.css('z-index', 3).addClass('active');
    });
}

$(window).load(function() {
    setInterval('cycleImages("main-photo-area")', 5000);
    setInterval('cycleImages("second-photo-area")', 5000);
})

I am assuming that you same structure for both the div.

Upvotes: 1

Related Questions