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

【问题标题】：jQuery: Find word and change every few secondsjQuery：查找单词并每隔几秒更改一次
【发布时间】：2011-09-15 02:29:33
【问题描述】：

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

例如：

我有这个：

<div>
    <span>This is so</span>
    <span>awesome</span>
</div>

...我希望 awesome 变成酷炫、奇妙、令人难以置信的，并使用淡出/淡入效果保持循环循环？

有可能吗？

非常感谢

【问题讨论】：

标签： jquery animation

【解决方案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 Example here

【讨论】：

【解决方案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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>This is so</span>
  <span id="wordChanger">awesome</span>
</div>

纯 JavaScript： codePen

创建一个保持不透明度 0 和过渡的类。
将超时设置为过渡持续时间，然后更改文本并删除其中的淡出类
按间隔循环

window.onload = function () {

  'use strict';

  var words = [
    'awesome',
    'incredible',
    'cool',
    'fantastic'
  ], 
      i = 0,
      wordChanger = document.querySelector('#wordChanger');

  setInterval(function () {
    wordChanger.classList.add('fadeOut');

    // timeout equal to transition duration
    setTimeout(function () {
      wordChanger.textContent = words[ (i === words.length - 1) ? i = 0 : i += 1];
      wordChanger.classList.remove('fadeOut');
    }, 400);

  }, 2000);
};

#wordChanger {
  opacity: 1;
  transition: opacity .4s ease;
  color: #f35537;
}

#wordChanger.fadeOut {
  opacity: 0;
  transition: opacity .4s ease;
}

<div>
  <span>This is so</span>
  <span id="wordChanger">awesome</span>
</div>

纯 CSS： codePen

用你的第一个词用content 做一个:before 伪
给它动画：
- 反转方向使其循环前进
- 持续时间等于 [2s（间隔持续时间）+ .8s（.4s fadeIn | .4s fadeOut）] * 4（元素数量）= 11.2s
- 设置动画百分比：
  - 将 100% 划分为 4 个元素（每个 content 增加 25%）
  - 从每个第一个/最后一个内容百分比中减去 5% 以进行过渡

#wordChanger {
  color: #f35537;
}

#wordChanger:before {
  content: 'awesome';
  animation: changeText 11.2s ease reverse forwards infinite
}

@keyframes changeText {
  100% { content: 'awesome'; opacity: 0 }
  95% { content: 'awesome'; opacity: 1 }
  80% { content: 'awesome'; opacity: 1}
  76% { content: 'awesome'; opacity: 0 } 

  75% { content: 'incredible'; opacity: 0 }
  70% { content: 'incredible'; opacity: 1 }
  55% { content: 'incredible'; opacity: 1 }
  51% { content: 'incredible'; opacity: 0 }

  50% { content: 'cool'; opacity: 0 }
  45% { content: 'cool'; opacity: 1 }
  30% { content: 'cool'; opacity: 1 }
  26% { content: 'cool'; opacity: 0 }

  25% { content: 'fantastic'; opacity: 0 }
  20% { content: 'fantastic'; opacity: 1 }
  5% { content: 'fantastic'; opacity: 1 }
  0% { content: 'fantastic'; opacity: 0 }
}

<div>
  <span>This is so</span>
  <span id="wordChanger"></span>
</div>

【讨论】：

【解决方案3】：

这应该可行。首先，将 id 添加到要在其上旋转文本的 span 中。例如，

<span id="rotate-word">awesome</span>

在你的 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/

【讨论】：

【解决方案4】：

将 ID 应用到 span 并使用 .text() 或 .html() 更改其内容

<div>
  <span>This is so</span>
  <span id="container">awesome</span>
</div>


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

【讨论】：

【解决方案5】：

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

工作demo

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

【讨论】：

【解决方案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)
            });

live demo here

【讨论】：