jQuery croisement fondu deux images sur une boucle!

Question

J'ai du mal à trouver un moyen de faire fonctionner un simple fondu dans une boucle de fondu. Je suis assez nouveau à jQuery comme vous pouvez le dire. Je l'ai essayé, mais maintenant ça prend trop de temps pour m'entraîner, alors j'ai pensé que je demanderais de l'aide.

Ce que je veux faire:

J'ai deux images, # de img1 de id et # img2. Je veux que l'image 1 apparaisse, puis attendez que l'on dise 6 secondes puis disparaisse. J'ai essayé la fonction .wait mais elle a juste arrêté le peu que j'avais de travailler. J'ai réussi à faire disparaître la première image, mais sans attendre. Je veux ensuite commencer à fondre l'image 2 pendant que l'image 1 disparaît, puis Image 2 à attendre, puis disparaître alors que l'image 1 se fane à nouveau et boucle pour toujours! J'espère que cela a du sens.

$(document).ready(function(){ 
    $('#img1').hide() 
.load(function() { 
    $(this).fadeIn(4500) 
    .fadeOut(4500); 
    $('#img2').hide().wait(9000) 
    .load(function() { 
    $(this).fadeIn(4500) 
    .fadeOut(4500); 
}); 

Bravo, ça me rend fou. Ps pouvez-vous essayer et donner une petite explication à ce qui se passe dans votre réponse. Merci

Answer 1

Modifier 2+ ans plus tard: Il y a de meilleures façons de le faire ... donc ignorer cette réponse.

---

Je voudrais essayer une combinaison de callbacks et setTimeout. (Je vais construire sur la réponse de Kobi, puisqu'il a posté pendant que je tapais.)

En CSS, donnez aux deux images un "display: none;" au lieu de les mettre au début cachés dans jQuery. Puis dans jQuery:

function imageOneFade(){ 
    $('#img1').fadeIn(2000, function(){ setTimeout("$('#img1').fadeOut(2000); imageTwoFade();",6000); }); 
} 

function imageTwoFade(){ 
    $('#img2').fadeIn(2000, function(){ setTimeout("$('#img2').fadeOut(2000); imageOneFade();",6000); }); 
} 

$(document).ready(function(){ 
    imageOneFade(); 
}); 

Espérons que quelque chose comme ça vous travaillez.

La fonction setTimeout prend deux paramètres. Et les fonctions fadeIn/Out peuvent avoir un deuxième paramètre qui se déclenchera lorsque l'effet sera terminé. Les fonctions fadeIn/Out peuvent être déclenchées par les fonctions fadeIn/Out.

Answer 2

Pourquoi n'utilisez-vous pas une solution déjà faite comme Cycle plugin?

Il a beaucoup plus d'options que vous voulez faire.

Si vous avez vraiment besoin de le faire vous-même, vous pouvez regarder le code source du plugin. Je n'ai pas fait cela, mais je pense que le codeur utilise une combinaison de la fonction animate (de jQuery) et de la fonction setTimeout (à partir de javascript uniquement). En utilisant ces fonctions, il doit faire quelque chose comme activer une minuterie pendant un certain temps, et quand le temps est terminé, il exécute la fonction animée en réglant l'opacité de l'image sur 0 (pour l'image cachée) et 1 (pour l'image).

Answer 3

Vous pouvez utiliser une combinaison de rappels de jQuery et JavaScript setTimeout.
setTimeout est utilisé pour les retards, et les rappels sont utilisés une fois les animations terminées (il y en a beaucoup d'autres).

function startSlideshow(){ 
    $('#p1').fadeOut(2000, function(){ 
    setTimeout(function(){ 
     $('#p1').fadeIn(2000, startSlideshow) 
    },1000); 
    }); 
} 

$(document).ready(function(){ 
    startSlideshow(); 
}); 

Voir en action: http://jsbin.com/ulugo

Answer 4

Voici un diaporama en boucle de quatre images qui n'utilise pas la fonction setTimeout, mais utilise à la place la fonction de délai.

<script> 
    function startSlideshow(){ 
    $("div.text_b1").fadeIn(1000).delay(10500).fadeOut(1500); //13000 
    $("div.text_b2").delay(13000).fadeIn(1500).delay(11000).fadeOut(1500); //27000 
    $("div.text_b3").delay(27000).fadeIn(1500).delay(11000).fadeOut(1500); //41000 
    $("div.text_b4").delay(41000).fadeIn(1500).delay(11000).fadeOut(1500, startSlideshow); //55000 
    } 

    $(document).ready(function(){ 
    startSlideshow(); 
    }); 
</script> 

voir en action http://www.erestaurantwebsites.com/

Answer 5

Sur la base de la fonction de retard(), voici la solution pour nombre d'images, si la boucle d'images en plus grand nombre nécessaire. Cela donne un effet de fondu enchaîné B-> A (ou supprime les + fadems/2 pour un effet simple de fadeOutIn). Mind - les images doivent être en position: absolue! (voir l'exemple html).

jQuery:

function startSlideshow(){ 

    var dms = 2500; // image show duration in ms 
    var fadems = 750; // crossfade in ms 
    var imgnum = 5; // total number of images 
    var nms = 0; 

    // fadeInOut first image 
    $("#img1").fadeIn(fadems).delay(dms).fadeOut(fadems); 
    nms = nms + fadems*2 + dms- fadems/2; 

    // fadeInOut rest images 
    for (var i = 2; i<imgnum; i++){ 
     // remove +fadems/2 for fadeOut effect, instead of crossfade 
     $("#img"+i).delay(nms).fadeIn(fadems).delay(dms).fadeOut(fadems+fadems/2); 
     nms = nms + fadems*2 + dms - fadems/2; 
    } 
    // fadeInOut last image and start over 
     $("#img"+imgnum).delay(nms).fadeIn(fadems).delay(dms).fadeOut(fadems, startSlideshow); 
} 

startSlideshow(); 

HTML: Note: suivante id image est rised par ++: # img1, # img2, # img3 .... # img128 etc.

<style> 
    .crossfade { 
     /* image width and height */ 
     width: 160px; 
     height: 120px; 
     display: none; 
     position: absolute !important; 

    } 
</style> 

<div class="place_your_images_container_where_is_needed"> 

    <div id="img1" class = "crossfade" > 
     <img src="imageOne.png" /> 
    </div> 

    <div id="img2" class = "crossfade" > 
     <img src="image2.png" /> 
    </div> 

    <div id="img3" class = "crossfade" > 
     <img src="image3.png" /> 
    </div> 

    <div id="img4" class = "crossfade" > 
     <img src="imageFour.png" /> 
    </div> 

    <div id="img5" class = "crossfade" > 
     <img src="imageLast.png" /> 
    </div> 

</div> 

ps Utilisez des images PNG transparentes pour un meilleur effet.

Answer 6

Voici comment je le ferais avec jQuery simple. Voir l'extrait de travail.

loopStart(); 
 

 
function loopStart() { 
 
    $("#image1").delay(2000).fadeOut("slow", function() { 
 
    loopTwo(); 
 
    }); 
 
}; 
 

 
function loopOne() { 
 
    $("#image1").fadeIn("slow", function() { 
 
    $("#image1").delay(2000).fadeOut("slow", function() { 
 
     loopTwo(); 
 
    }); 
 
    }); 
 
}; 
 

 
function loopTwo() { 
 
    $("#image2").fadeIn("slow", function() { 
 
    $("#image2").delay(2000).fadeOut("slow", function() { 
 
     loopOne(); 
 
    }); 
 
    }); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="image1" src="http://lorempixel.com/city/200/200"> 
 
<img id="image2" style="display:none;" src="http://lorempixel.com/people/200/200">