jQuery Girl
  1. jQuery Girl
  3. ouverture / fermeture en fondu entre deux divs sur une boucle
Intereting Posts
jQuery Mobile – impossible de lier pagebeforechange à l’identifiant de page? Simplifiez ce javascript pour Show one, Hide Rest Transmission de données à un client Ajouter une cellule de table de débordement dans une cellule avec un en-tête Obtenir un élément html DOM à partir d’un élément JQuery Pass Date Values ​​from Ajax Call to MVC Comment insérer des données dans une liste déroulante et pouvoir les rechercher en les saisissant? Firebug: “La propriété ‘charCode’ d’un événement keyup ne doit pas être utilisée. La valeur n’a pas de sens. “ Jquery pour changer href Pourquoi KML ne se charge-t-il pas dans Google Maps? jQuery scrollRight? Echec du chargement de la ressource: Uncaught TypeError: $ (…) .select2 n’est pas une fonction Demander un message d’avertissement avant de fermer un modal Puis-je effectuer une demande POST Ajax JQuery avec Ionic? Le plug-in de validation jQuery ne valide pas les éléments de formulaire créés dynamicment

ouverture / fermeture en fondu entre deux divs sur une boucle

Comment pourrais-je faire en sorte que deux div fondent en fondu en alternance, de sorte qu’un seul soit visible à la fois? Et aussi en faire une boucle sans fin?

Merci d’avance!!

Je sais que cela devrait être fait avec les fichiers .fadeOut et .fadeIn – mais je ne sais pas comment le faire en boucle, encore et encore.

Voici ma propre version à la fiddle

http://jsfiddle.net/3KydB/ 

window.switchIn = function () { $('.red').fadeToggle(function() { $('.blue').fadeToggle(function() { setTimeout(function() {window.switchOut();}, 500); }); }); } window.switchOut = function () { $('.blue').fadeToggle(function() { $('.red').fadeToggle(function() { setTimeout(function() {window.switchIn();}, 500); }); }); } setTimeout(function() {window.switchIn();}, 500)

La solution à votre question est un peu plus délicate qu’un simple fadeToggle car vous ne voulez pas qu’un DIV soit affiché en même temps. La clé consiste à enchaîner les actions de fondu pour que la prochaine action de fondu ne s’exécute pas avant la fin de la précédente.

Logiquement, vous voulez: fondu en entrée DIV1, fondu en fin DIV1, fondu en entrée DIV2, fondu en fin DIV2, répétez.

Ma solution ci-dessous prend deux éléments quelconques sur la page et fait osciller leur visibilité sans afficher l’un ou l’autre en même temps. iDuration spécifie le temps pour chaque transition en millisecondes.

Exemple de travail

HTML:

JavaScript: 

 function runToggle(iDuration, domFirst,domSecond) { $(domFirst).fadeToggle(iDuration, "linear",function() { $(domFirst).fadeToggle(iDuration, "linear",function() { $(domSecond).fadeToggle(iDuration,"linear",function() { $(domSecond).fadeToggle(iDuration,"linear",function() { setTimeout(function() { runToggle(domFirst,domSecond) ; },50); }); }); }); }); }; runToggle(1000, $('#div1'),$('#div2'));

J’utilise setTimeout non pas à des fins de minutage, mais simplement pour libérer l’interpréteur JavaScript afin que le navigateur puisse effectuer d’autres tâches pendant le déroulement de cette boucle.

Comment allez-vous, vous pouvez le faire.

setInterval () – exécute une fonction, encore et encore, à des intervalles de temps spécifiés;

setInterval (code, millisec, lang)

Donc, vous pouvez créer une fonction qui la crée. un exemple

Et ça doit marcher, dites-moi si ça ne marche pas.

Bonne chance!