JQuery: найти слово и менять каждые несколько секунд

Question

Как я могу менять слово каждые 2-3 секунды, используя jQuery?

Например:

У меня есть это:

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

... и я хочу, чтобы офигенно превратился в крутой, фантастический, невероятный и продолжал цикл с циклом, используя эффект 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);

})();

Присвойте своему диапазону идентификатор и измените changerificwordspanid на идентификатор диапазона.

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

<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

• Создайте :before псевдо с content своим первым словом
• Добавьте анимацию с помощью :
  • В обратном направлении, чтобы сделать цикл вперед
  • Длительность равна [2с (длительность интервала) + .8с (.4с fadeIn | .4с
  • Установка процента анимации :
    • Разделите 100% на 4 элемента (приращение 25% для каждого content)
    • Вычтите 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>

Answer 3

Это должно работать. Сначала добавьте идентификатор к диапазону, на который вы хотите повернуть текст. Например.,

<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

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

демо здесь

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

Применить идентификатор к диапазону и изменить его содержимое, используя .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);