Comment créer un effet de fondu sur une image d'arrière-plan rotative en utilisant Jquery

Question

J'utilise actuellement un petit script jquery pour faire pivoter des images d'arrière-plan sur un site de portfolio que je crée pour le site d'un ami. Voici le code:

counter = 1; 
    num_images = 9; 
    dir = "IMAGE DIRECTORY URL"; 

    function rotateHeader() { 


var background_img = 'url(' + dir + '/image' + counter + '.gif)'; 

jQuery('.category').css('background-image', background_img); 
counter++; if (counter > num_images) counter = 1; 

    } 
    setInterval("rotateHeader()", 5000); 

Vous pouvez le voir travailler ici:

www.iamanatom.com/site/the-good

ce que je veux faire est d'avoir les images et les couleurs sont fades ou dans et hors. Je pense que je devrais précharger les images pour cela, puis ajouter une sorte de propriété de fondu lorsque les images sont en cours de chargement. Comment est-ce que je fais ceci?

Answer 1

Quelque chose comme cela devrait le faire

var counter = 1, 
    num_images = 9, 
    dir = "IMAGE DIRECTORY URL"; 

function rotateHeader() { 

    var background_img = 'url(' + dir + '/image' + counter + '.gif)'; 

    jQuery('.category').fadeOut(function() { 
     jQuery(this).css('background-image', background_img).fadeIn(); 
    }); 
    counter++; if (counter > num_images) counter = 1; 
} 
setInterval(rotateHeader, 5000); 

D'abord, nous disparaîtrons l'image d'arrière-plan en cours, puis dans la fonction de rappel, changer l'image d'arrière-plan, puis fondu en arrière. Vous pouvez jouer avec les intervalles fadeOut() et fadeIn() pour obtenir l'effet souhaité. J'ai également changé le setInterval() pour utiliser le nom de la fonction par opposition à une chaîne à évaluer.