I just used a secound div aas a swapping plane. the visible div is now fading out while the invisible one is fading in. after that the roles are switched and it goes on and on.. one problem still remains. if switching the images too fast the classes "stack" because the animation of the fading div is interrupted and the class will not be removed.. Problem solved..
var timer;
$(document).ready(function () {
// background image on load
var numberImages = 5,
easetime = 2000,
changetimeout = 5000;
var images = [];
for (var i = 1; i <= numberImages; i++) {
images.push(i);
}
var imgValue = 1;
var visibleBackground = $('.backgroundImage.a');
var invisibleBackground = $('.backgroundImage.b');
$('.backgroundImage').hide();
visibleBackground.addClass('bg' + imgValue + '').show();
var dir = 1;
function changeBG(){
oldValue = imgValue;
imgValue = (imgValue+dir)%numberImages;
$('.rotating-text'+imgValue).fadeIn(easetime);
$('.rotating-text'+oldValue).fadeOut(easetime);
clearTimeout(timer);
timer = setTimeout(function () {
changeBG();
}, changetimeout);
visibleBackground.fadeOut(easetime);
setTimeout(function(){
var tmpBackground = visibleBackground, tmpVal = oldValue;
return function(){
tmpBackground.removeClass('bg' + tmpVal)
}
}(), easetime);
invisibleBackground.addClass('bg' + imgValue + '').fadeIn(easetime);
var swap = visibleBackground;
visibleBackground = invisibleBackground;
invisibleBackground = swap;
}
// Switch background image - forwards
$('.imgSwitchRight').click(function () {
dir = 1;
changeBG()
});
// Switch background - backwards
$('.imgSwitchLeft').click(function () {
dir = -1;
changeBG()
});
timer = setTimeout(function () {
changeBG();
}, changetimeout);
});