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代码使单个，新的listitems显示正常但是由于某种原因，当我加载页面时，列表已经改变 - 然后循环再次运行。

$("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

检查这个小提琴：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);

    });

});

Answer 2

就个人而言，我会这样：

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 3

试试这个：

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 4

$(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/

在页面中显示列表，然后使用jQuery

4 个答案: