Ajout de la fonction de fondu au script JS?

Question

J'ai donc ce script de base qui alterne entre trois images et je voudrais ajouter un simple fadein/fadeout/fadeto ou tout ce qui est meilleur, donc ce n'est pas si maladroit. Comment puis-je atteindre cet objectif? Ou, y a-t-il un meilleur moyen?

function displayNextImage() { 
    x = (x === images.length - 1) ? 0 : x + 1; 
    document.getElementById("img").src = images[x]; 
    } 
function displayPreviousImage() { 
    x = (x <= 0) ? images.length - 1 : x - 1; 
    document.getElementById("img").src = images[x]; 
    } 
function startTimer() { 
    setInterval(displayNextImage, 3000); 
    } 
    var images = [], x = -1; 
    images[0] = "assets/img/logo1.png"; 
    images[1] = "assets/img/logo2.png"; 
    images[2] = "assets/img/logo3.png"; 

Answer 1

Vous pouvez régler l'opacité des images avant de changer le src:

function displayNextImage() { 
    x = (x === images.length - 1) ? 0 : x + 1; 
    var imgvar = document.getElementById("img"); 
    imgvar.classList.add("fadeOut"); 
    setTimeout(function() { 
     imgvar.src = images[x]; 
     imgvar.classList.remove("fadeOut"); 
    }, 500); 
} 
function displayPreviousImage() { 
    x = (x <= 0) ? images.length - 1 : x - 1; 
    var imgvar = document.getElementById("img"); 
    imgvar.classList.add("fadeOut"); 
    setTimeout(function() { 
     imgvar.src = images[x]; 
     imgvar.classList.remove("fadeOut"); 
    }, 500); 
} 
function startTimer() { 
    setInterval(displayNextImage, 3000); 
} 
    var images = [], x = -1; 
    images[0] = "assets/img/logo1.png"; 
    images[1] = "assets/img/logo2.png"; 
    images[2] = "assets/img/logo3.png"; 

Et en CSS:

img { 
    opacity: 1; 
    transition: opacity 500ms ease-in-out; 
} 
img.fadeOut { 
    opacity: 0; 
} 

Remarque : J'ai ajouté un timeout de 500ms en javascript car je suspecte que sinon l'animation ne serait pas visible du tout car elle passerait instantanément du visible à l'invisible au visible à nouveau.

Answer 2

Vous pouvez placer deux éléments d'image dans la page. Un pour l'image actuelle et un pour l'image suivante.

Une fois le temps de montrer l'image est passée, appliquer une classe CSS sur l'image visible pour passer son opacité à 0.

Une fois la transition terminée, remplacer la source d'image avec l'image suivante pour montrer. Positionnez l'élément image derrière l'élément image qui est maintenant visible pour l'utilisateur et supprimez la transition CSS.

Answer 3

Vous pouvez essayer animate.css pour animer la balise html à chaque fois que vous appelez l'une des fonctions.

https://github.com/daneden/animate.css

Answer 4

Vous pouvez utiliser ce qui suit.

$(document).ready(function(){ 
    $(".btn1").click(function(){ 
     $("p").fadeOut() 
    }); 
    $(".btn2").click(function(){ 
     $("p").fadeIn(); 
    }); 
}); 

Toutefois, cela utilise jQuery. Selon vos limites, vous ne pourrez peut-être pas l'utiliser. Pour plus d'informations sur les fonctions fadeIn(time) et fadeOut(time), la caisse W3's article!