Question

我在SO上找到了可以调整以适应我的需求的代码，但似乎无法使所有功能都能按需工作。基本上，我有一些ul，li的淡入淡出，然后列表淡出，整个ul重复该过程。我想在ul切换时间之间添加一个延迟。所以我想让'ul＃one'淡入li，然后保持可见2秒钟，然后从'ul＃two'中淡入li'

这是标记：

<ul id="one" class="contracts">
   <li>one</li>
   <li>one</li>
   <li>one</li>
</ul>
<ul id="two" class="contracts">
   <li>one</li>
   <li>one</li>
   <li>one</li>
</ul>
...etc

和js

function AnimateList($listItems, index, callback) {
    if (index >= $listItems.length) {
        $listItems.closest("ul.contracts").fadeOut(function() {
            $listItems.css("left","400px").css("opacity",0); //reset
            callback(); //next list
        });
        return;
    }

    $listItems.eq(index).animate({left:0, opacity:1}, 2500, function() {
        AnimateList($listItems, index+1, callback)
    });
}

function FadeLists($lists, index) {
    if (index >= $lists.length) index = 0;
    var $currentList = $lists.eq(index);
    $currentList.fadeIn(function() {
        AnimateList($currentList.find("li"), 0, function() { FadeLists($lists, index + 1) 
        });
    }) 
}

var $allLists = $("ul.contracts")
FadeLists($allLists, 0);

我尝试在“ FadeLists”周围添加一个setTimeout，但是它似乎不起作用。

function FadeLists($lists, index) {
    if (index >= $lists.length) index = 0;
    var $currentList = $lists.eq(index);
    setTimeout($currentList.fadeIn(function() {
        AnimateList($currentList.find("li"), 0, function() { FadeLists($lists, index + 1), 2500); 
        });
    }) 
}

也没有为法德主义者的争论增加时间。

setTimeout(FadeLists($allLists,0),2500);

在重新运行FadeLists之前，如何使每个列表保持可见状态2秒钟？

每个零点298，我尝试了以下操作，但是它将初始运行延迟了指定的时间，并且在ul的淡入淡出之间没有任何延迟

function AnimateList($listItems, index, callback) {
    if (index >= $listItems.length) {
        $listItems.closest("ul.contracts").fadeOut(function() {
            $listItems.css("left","400px").css("opacity",0); //reset
            callback(); //next list
        });
        return;
}

    $listItems.eq(index).animate({left:0, opacity:1}, 1500, function() {
        AnimateList($listItems, index+1, callback)
    });
}

function FadeLists($lists, index) {
    if (index >= $lists.length) index = 0;

    var $currentList = $lists.eq(index);
    setTimeout( () => $currentList.fadeIn(function() {
        AnimateList($currentList.find("li"), 0, function() {        
            FadeLists($lists, index + 1) });
    })); 
}

var $allLists = $("ul.contracts")
// FadeLists($allLists, 0);
setTimeout(() => FadeLists($allLists,0),2500);

Answer 1

由于要更改样式，因此应将尽可能多的代码移至CSS。我编写了这段代码，因此唯一需要使用JS更改的CSS属性是动画延迟，因为无法在当前CSS中使用索引。仅在页面加载时发生一次，然后不再运行JS。所有计时循环都位于CSS关键帧中。

$(".contracts li").each(function(index){
  $(this).css({'animation-delay' : (1+index)+'s'});
});

body {
  overflow-x: hidden;
}

li {
  position: relative;
  animation: fade 8s infinite;
}

@keyframes fade {
  0% { left: 400px; opacity: 0; }
  20%, 100% { left: 0; opacity: 1; }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<ul id="one" class="contracts">
  <li>one</li>
  <li>one</li>
  <li>one</li>
</ul>
<ul id="two" class="contracts">
  <li>two</li>
  <li>two</li>
  <li>two</li>
</ul>

增加第二功能的延迟

1 个答案: