jQuery animate изменение текста бесконечный цикл

Question

Я пытаюсь создать анимацию смены текста, основанную на fade-out - изменить текст - концепцию затухания, которая будет работать как бесконечный цикл, обведя 3 разных текста с 2-секундными паузами между ними.

У меня есть этот JQuery код в свой файл Javascript:

$(document).ready(function changeText(){ 
    $(this).find("#changeText").delay(2000).animate({opacity:0},function(){ 
     $(this).text("foo").animate({opacity:1},function(){ 
      $(this).delay(2000).animate({opacity:0},function(){ 
       $(this).text("bar").animate({opacity:1}, function(){ 

       }); 
      }); 
     }); 
    }); 
}); 

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

Я попробовал setInterval, window.function, для цикла и нескольких других сигналов, и они либо бросают ошибку о слишком большой рекурсии, либо разбивают мой браузер или вообще не работают. Либо это даже не должно работать так, или я не делаю что-то правильно.

Это HTML, что я пытаюсь изменить:

<div class="container"><span id="changeText">blah</span></div> 

Answer 1

Вы используете «this» ссылки на запуске вашего кода, но он отсутствует контекст для элемента он направлен. Кроме того, поскольку у вас есть элемент с идентификатором 'changeText', вы можете просто настроить его прямо в своем селекторе.

$(document).ready(function(){ 
    $("#changeText").delay(2000).animate(
    {opacity:0 },function(){ 
     $(this).text("foo").animate({opacity:1},function(){ 
     $(this).delay(2000).animate({opacity:0},function(){ 
      $(this).text("bar").animate({opacity:1}, function(){ 
      }); 
     }); 
    }); 
    }); 
}); 

Рабочий пример: https://jsfiddle.net/q1o2f5jx/

EDIT:

Для улучшения в коде, добавить текст в массиве и увеличивает индекс на setInterval.

var textArray = ["foo","bar","blah1","blah2"]; 
var index = 0; 
setInterval(function(){   
$("#changeText").animate({ 
opacity:0 
},function() 
{ 
    if(textArray.length > index) { 
    $(this).text(textArray[index]).animate({opacity:1}) 
    index++; 
    } 
    else 
    index = 0; 
}); 
},2000); 

Рабочий пример: https://jsfiddle.net/q1o2f5jx/2/

Answer 2

я должен быть глупым, решение было слишком просто для меня, чтобы увидеть его. Я даже пробовал это, но, должно быть, я написал что-то неправильно, что сделало его неработоспособным. Все это время я пытался повторно вызвать функцию внутри области $ (document) .ready из-за пределов области видимости, что практически невозможно, но на самом деле мне не нужно это делать.

Я только что создал обычную функцию JavaScript с jQuery внутри нее, которая вызывается за пределами функции, и каждый повторный вызов выполняется из последнего обратного вызова .animate().

function changeText(){ 
    $("#changeText").delay(2000).animate({opacity:0},function(){ 
     $(this).text("foo").animate({opacity:1},function(){ 
      $(this).delay(2000).animate({opacity:0},function(){ 
       $(this).text("bar").animate({opacity:1},function(){ 
        $(this).delay(2000).animate({opacity:0},function(){ 
         $(this).text("blah").animate({opacity:1},function(){ 
          changeText();       
         }); 
        }); 
       }); 
      }); 
     }); 
    }); 
}; 

changeText();