Возникли проблемы при попытке исчезнуть текст In и Out для setTimeout

Question

Я искал способы исчезнуть и исчезнуть в словах для моей функции.Я все еще новичок в JavaScript, поэтому я действительно не могу думать о других путях.Мой код все еще сильно обновляется, даже когда я добавляю и исчезаю, поэтому я прошу помощи.Спасибо

var words = [
"Aaron",
"John",
"Megan"
];

index = 0;
function wordslide(){
    setTimeout(function(){
        $('.title-case:eq(0)').html('<div class="img-title">'+words[index]+'</div>').fadeIn();
    });
    index++;
    if (index == words.length) { index = 0}
        setTimeout(wordslide, 2000);
}
wordslide();

Answer 1

похоже, что вместо setTimeout вы ищете set Interval .Это может помочь убрать часть сложности вашего кода.

После этого просто вызовите hide или fadeOut перед fadeIn, как предложил Чич.

Используя setInterval, мы могли бы переписать вашу функцию как:

var words = [
"Aaron",
"John",
"Megan"
];

index = 0;

var myWordFadeInterval = setInterval(function(){
wordslide();
}, 2000);

function wordslide(){
        $('.title-case:eq(0)').html('<div class="img-title">'+words[index]+'</div>.fadeOut(1000).fadeIn(1000)');
        index++;
        if (index == words.length) 
          index = 0
}


//when you want to stop your interval call:
//clearInterval(myWordFadeInterval);

Первый параметр вашего fadeIn / fadeOut - время больше информации

Answer 2

Элементы полностью видны при их создании. Попробуйте добавить .hide() перед .fadeIn(), это должно привести к исчезновению имен.

$('.title-case:eq(0)').html('<div class="img-title">'+words[index]+'</div>').hide().fadeIn();