Loading...

Search jQuery

Search

jQuery Forum

Fade in / Fade Out

in Using jQuery • 8 years ago

Newbie and first post of mine.

Would like to add fade in / fade out for the banner images.

Right now the banner rotates one by one

// The Code am using //
var images = ['images/banner-1.jpg', 'images/banner-2.jpg', 'images/banner-3.jpg', 'images/banner-4.jpg'];
var i = 0;
setInterval(function(){
$('body').css('background-image', function() {
if (i >= images.length) {
i=0;
}
return 'url(' + images[i++] + ')';
});
}, 5000);
//-----------------//

The working version is here.

Thanks in advance.

Amarnath Jaganathan

Replies(3)

s4ty

Re: Fade in / Fade Out

8 years ago

well, i built you a simply slideshow for this.

You can configurate the animation speed and the interval speed

http://jsbin.com/igunut/2

(function($) {
$.fn.slideshow = function(options) {
var o = $.extend({
speed: 1000,
interval: 2500
}, options);
var $slider = $(this),
$slider_li = $slider.find('li'),
length = $slider_li.length;
setInterval(function () {
var $active = $slider.find('.active'),
index = $slider_li.index($active),
i = length-1 === index?0:++index;
console.log(i);
$active
.animate({opacity: 0}, o.speed, function () {
$(this).removeClass('active');
});
$slider_li
.eq(i)
.animate({opacity: 1}, o.speed, function () {
$(this).addClass('active');
});
}, o.interval);
};
})(jQuery);
$(function () {
$('#slidershow').slideshow({speed: 1000});
});

Re: Fade in / Fade Out

8 years ago

Hey that is awesome man, works out brilliantly

Thank you very much for your effort.

Re: Fade in / Fade Out

8 years ago

Take a look at this site - I think it has waht you are looking for

http://tobia.github.com/CrossSlide/

Dragonfish52