jQuery Girl
  1. jQuery Girl
  3. jQuery: Trouver un mot et changer toutes les quelques secondes
Intereting Posts
: remote => true / data-remote sur un formulaire chargé via ajax jQuery animer le long d’une onde sinusoïdale cocher / décocher la case à cocher en fonction d’une autre case à cocher Convertir un tableau HTML en Excel Comment imprimer un object / tableau jquery Comment sortinger les éléments DOM lors de la sélection dans jQuery? Supprimer un mot commun de chaque valeur de chaîne dans un tableau Contrôle utilisateur ASP.NET et boîte de dialog jQuery Jquery datepicker popup ne ferme pas à une date sélectionnée dans IE8 récupérer dynamicment les valeurs de la zone de texte en utilisant foreach jquery qui est lui-même créé dynamicment Pas de réduction automatique lors de la création d’un sous-élément dans le menu du modèle Bootstrap Adminlte jQuery jPlayer changer de média ne fonctionne pas Je n’arrive pas à mettre ces données JSON dans DataTables Obtenir la largeur d’un élément HTML en pourcentage% avec jQuery Ajouter un sortingangle à l’autre de la div avec css

jQuery: Trouver un mot et changer toutes les quelques secondes

Comment puis-je changer un mot toutes les 2-3 secondes avec jQuery?

Par exemple:

J’ai ceci: 

 This is so awesome

… et je veux que ce soit génial de changer en cool, fantastique, incroyable et de continuer à faire du vélo avec des boucles utilisant l’effet fadeOut / fadeIn peut-être?

C’est possible?

Merci beaucoup 

 (function(){ // List your words here: var words = [ 'awesome', 'incredible', 'cool', 'fantastic' ], i = 0; setInterval(function(){ $('#changerificwordspanid').fadeOut(function(){ $(this).html(words[i=(i+1)%words.length]).fadeIn(); }); // 2 seconds }, 2000); })();

changerificwordspanid un identifiant à votre étendue et remplacez changerificwordspanid par l’identifiant de l’étendue.

Exemple JSFiddle ici

JQuery: jsfiddle 

 var words = [ 'awesome', 'incredible', 'cool', 'fantastic' ], i = 0; setInterval(function() { // \/ \/ callback function $('#wordChanger').fadeOut(400, function() { // if i = last index ? i = 0 else i++ $(this).text(words[ (i === words.length - 1) ? i = 0 : i += 1] ).fadeIn(400); }); }, 2000); 
 #wordChanger { color: #f35537; } 
  
 This is so awesome

Cela devrait marcher. Commencez par append un identifiant à la plage sur laquelle vous souhaitez faire pivoter le texte. Par exemple, 

 awesome

Et dans votre JavaScript: 

 $(function() { var words = ['cool', 'fantastic', 'incredible', 'awesome'], index = 0, $el = $('#rotate-word') setInterval(function() { index++ < words.length - 1 || (index = 0); $el.fadeOut(function() { $el.text(words[index]).fadeIn(); }); }, 3000); });

Vous pouvez voir cela en action ici: http://jsfiddle.net/DMeEk/

Appliquez un ID à l’étendue et modifiez son contenu à l’aide de .text() ou .html() 

 
 This is so awesome 
 var texts = new Array(); texts[0] = "cool"; texts[1] = "awesome"; var i = 0; function changeText() { $("#container").fadeOut("fast", function(){ $(this).html(texts[i++]); $(this).fadeIn(); }); if(i > texts.length) i = 0; } setInterval('changeText()', 2000);

Vous pouvez facilement le faire en utilisant setInterval et quelques lignes de code.

Démo de travail 

 var keywords = ["awesome", "cool", "fantastic", "incredible"]; var count = 1; setInterval(function(){ $("span.keyword").fadeOut(400, function(){ $(this).html(keywords[count]); count++; if(count == keywords.length) count = 0; $(this).fadeIn(400); }); }, 2000); 
  $(document).ready(function(){ setInterval(function(){ var current = jQuery(".animate-span .active"); var cIndex = jQuery(".animate-span span").index(current), cLength = jQuery(".animate-span span").length, nextSpan = null; if(cIndex<(cLength-1)){ nextSpan = jQuery(".animate-span span").eq(cIndex+1) }else{ nextSpan = jQuery(".animate-span span").eq(0); } nextSpan.animate({top:0,opacity:1},500).addClass("active"); current.animate({top:45,opacity:0},500,function(){ jQuery(this).css({top:-40}); }).removeClass("active"); },2000) });

vivre la démo ici