Question

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

例如：

我有这个：

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

...我希望 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);

})();

为您的范围指定ID，并将changerificwordspanid更改为范围的ID。

JSFiddle Example here

Answer 2

JQuery： jsfiddle

＆＃13;

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

＆＃13;

#wordChanger {
  color: #f35537;
}

＆＃13;

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

＆＃13;

纯JavaScript： codePen

创建一个包含不透明度0和过渡的类。
设置超时等于转换持续时间，然后更改文本并删除其中的淡出类
以间隔

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

纯CSS： codePen

使用您的第一个单词

:before

content

用给它动画：
- 反向使其向前循环
- 持续时间等于[2s（间隔持续时间）+ .8s（.4s fadeIn | .4s fadeOut）] * 4（元素编号）= 11.2s
- 设置动画百分比：
  - 在4个元素上划分100％（每个content增加25％）
  - 从每个第一个/最后一个内容百分比中减去5％以进行转换

＆＃13;

#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 }
}

＆＃13;

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

＆＃13;

Answer 3

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

<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/

Answer 4

将某个ID应用于范围，并使用.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);

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

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

live demo here

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

6 个答案: