Изменение текста с анимацией jQuery

Question

У меня есть код, который работает, но иногда он просто «перескакивает» на другой текст без уважения к интервалу.

Код в основном изменяет текст заголовка на интервале.

var text = ["text1", "text2", "text3","text4","text5"]; 
var index = 0; 

$("#description").fadeOut("slow"); 

setInterval(function(){ 
    $("#description").html(text[index]).fadeIn("slow"); 
    $("#description").delay(400).fadeOut("slow"); 
    index++; 
    if (index == 5) { 
     index = 0; 
    }; 
}, 1800); 

Если вы, ребята, можете помочь мне сделать эту работу, или даже улучшить его, я был бы очень благодарен :)

Fiddle: http://jsfiddle.net/erbfqqxb/

Answer 1

Я думаю, что это произойдет из-за линии

$("#description").fadeOut("slow"); 

комментарий, что линия будет работать нормально.

Answer 2

Просто попробуйте, как показано ниже:

setInterval(function(){ 
    //first stop what you are doing and then fadeIn again 
    $("#description").stop().html(text[index]).fadeIn("slow",function(){ 
     //set a callback to do all these things once fadeIn is completed 
     index++; 
     $("#description").delay(400).fadeOut("slow"); 
     if (index == 5) { 
      index = 0; 
     }; 
    }); 
},1800); 

Я думаю, что проблема была с delay. setInterval время и задержка time были противоречивыми. Поэтому вышеприведенный подход кажется мне лучше.

DEMO

Answer 3

Я думаю, что проблема может быть вызвана, когда ваш интервал догоняет время, затрачиваемое для задержки и замирает. Попробуйте запустить каждую анимацию в функции обратного вызова, так что он работает как линейный процесс, чтобы сохранить текст из «прыгать»:

var text = ["text1", "text2", "text3","text4","text5"]; 
var index = 0; 
var description = $("#description"); 

description.fadeOut("slow", changeText); 

function changeText(){ 
    // run the initial animation 
    description.html(text[index]).fadeIn("slow", function() { 


     // run the second animation after the first one has finished - can remove the delay if you want to 
     // the delay here is how long you want the text to be visible for before it starts to fade out 
     description.delay(400).fadeOut("slow", function() { 
      index++; 
      //measure against array length instead of hard coded length 
      if (index == text.length) { 
       index = 0; 
      }; 

      //set the delay before restarting animation sequence (only restart once the sequence has finished) 
      setTimeout(changeText, 400); 
     }); 
    }); 
} 

Updated fiddle

Answer 4

Вот рабочий код и его более динамичным с помощью

index == text.length 

$(function() { 
     var text = ["text1", "text2", "text3","text4","text5"]; 
     var index = 0; 

     $("#description").fadeOut(); 

     setInterval(function(){ 
      $("#description").html(text[index]).fadeIn("slow"); 
      $("#description").delay(400).fadeOut("slow"); 
      index++; 
      if (index == text.length) { 
       index = 0; 
      }; 
     },1800); 
     }); 

Answer 5

<pre>Use call back function and remove delay</pre> 

JSFIDDLE: http://jsfiddle.net/rajen_ranjith/erbfqqxb/3/.