Показать список на странице, а затем заменить каждый элемент списка один на один с JQuery

Question

У меня есть простой список в моей странице:

<ul id="alphabet" > 
    <li><span>A</span></li> 
    <li><span>B</span></li> 
    <li><span>C</span></li> 
    <li><span>D</span></li> 
</ul> 

т.д.

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

$(document).ready(function() { 
var newSkillArray = ["ANDROID DEV", 
        "BOOTSTRAP", 
        "CSS", 
        "DATABASES"] 

т.д.

Этого код JQuery делает индивидуальные, новый, Элементы списка отображаются в порядке, но по какой-то причине, когда я загрузить страницу, список уже изменился - и цикл снова запустится.

$("li").each(function (index){ 
$(this).delay(2000).fadeOut(100); 
$(this).delay(400*index).text(newSkillArray[index]); 
$(this).delay(400*index).fadeIn(300); 
}); 

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

Рабочая JSfiddle: https://jsfiddle.net/wkbe6zjw/

Answer 1

Лично я бы так:

var index = 0; 
var lis = $("li"); 
var interval = setInterval(function() { 
    console.log($("li")[index]); 
    lis.eq(index).fadeOut(400, function() { 
    $(this).text(newSkillArray[index]).fadeIn(400); 
    }); 
    index++; 
    if (index == newSkillArray.length) { 
    clearInterval(interval); 
    } 
}, 600); 

Вот рабочая скрипку: https://jsfiddle.net/Shitsu/tr30kvk3/1/ , Переходы гладкие и приятные.

Answer 2

Попробуйте это:

function FadeIn() { 
var newSkillArray = ["ANDROID DEV", 
        "BOOTSTRAP", 
        "CSS", 
        "DATABASES"]; 
//debugger; 
    $("li").each(function (index){ 
    $(this).delay(0).fadeOut(0); 
    $(this).delay(400*index).text(newSkillArray[index]); 
    $(this).delay(400*index).fadeIn(300); 
    }); 
} 

// document ready 
$(function() { 
    setTimeout(FadeIn, 2000); 
}); 

Demo

Answer 3

$(document).ready(function() { 
var newSkillArray = ["ANDROID DEV", 
        "BOOTSTRAP", 
        "CSS", 
        "DATABASES"]; 
//debugger; 
    $("li span").each(function (index){ 
    $(this).delay(2000*index).fadeOut(100, function(){ 
    $(this).text(newSkillArray[index]); 
    $(this).delay(400*index).fadeIn(300); 
    }); 

    }); 

}); 

https://jsfiddle.net/wkbe6zjw/5/

Answer 4

Проверить эту скрипку: https://jsfiddle.net/wkbe6zjw/4/

HTML:

<ul id="alphabet" class="show-for-medium-up show-for-landscape"> 
    <li><span>A</span></li> 
    <li><span>B</span></li> 
    <li><span>C</span></li> 
    <li><span>D</span></li> 
</ul> 

JQuery:

$(document).ready(function() { 
var newSkillArray = ["ANDROID DEV", 
        "BOOTSTRAP", 
        "CSS", 
        "DATABASES"]; 
    $("li").each(function (index){ 
     var li = $(this); 
     li.fadeOut(2000); 
     window.setTimeout(function() { 
      li.text(newSkillArray[index]).delay(400*index).fadeIn(300); 
     }, 2000); 

    }); 

});