jQuery：查找单词并每隔几秒更改一次

如何使用jQuery每2-3秒更改一个单词？

例如：

我有这个：

 This is so awesome  

…我希望真棒变成酷，梦幻，令人难以置信，并使用fadeOut / fadeIn效果保持循环循环可能吗？

可能吗？

非常感谢

Answer 1

 (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); })(); 

给你的span一个id，并将changerificwordspanid更改为span的id。

JSFiddle示例在这里

Answer 2

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  

Answer 3

这应该工作。 首先，将id添加到要旋转文本的范围。 例如，

 awesome 

在你的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); }); 

你可以在这里看到这个： http ： //jsfiddle.net/DMeEk/

Answer 4

将标识应用于范围并使用.text()或.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); 

Answer 5

您可以使用setInterval和几行代码轻松完成此操作。

工作演示

 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); 

Answer 6

  $(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) }); 

现场演示