使用列表项之间的类循环来衰退动画

Question

我有一些代码，我碰到的是我正在寻找以有效方式在列表项之间循环的代码。我的问题是，我需要他们在'下一个'李可以fadeIn（）之前fadeOut（）'活跃'锂。

我现在已经明显地过渡了，我正在寻找一些更“性感”的东西，这就是为什么我希望它在过渡之间淡化。

我试图战略性地放置设置超时功能，但最终与含有变化的大小通过转换（显然是因为我切换不正确的时间）。

这里是我的代码，我有过渡：

$(function() { 

    $(".header-featured-blocks").css("padding-top", "0px"); 

    var $lis = $('.header-featured-blocks li'); 
    $cur = $lis.first().addClass('active'); 
    $next = $cur.next().addClass('next'); 

    setInterval(function() { 
     $cur.removeClass('active'); 
     $cur = $next.removeClass('next').addClass('active'); 

     $next = $cur.next(); 
     if (!$next.length) { 
      $next = $lis.first(); 
     } 
     $next.addClass('next'); 
    }, 5000); 
}); 

这里是我试图获得平滑的过渡失败的尝试。希望这会帮助别人试图理解我想要达到的目标。

我的思考过程是：淡出当前的“活动”，等到淡出，然后从元素中删除“活动”类。当发生这种情况时，请将超时设置为500毫秒，而前面提到的操作正在进行，因此直到先前的“活动”已从“活动”类中移除后，“下一个”元素才会变为“活动”。

就像我之前所说的，我的时间是关闭的。而且我知道这一点，因为如果我正确地做到了这一点，转换的li元素不会在它们包含的div中反弹。

$(function() { 

    var $lis = $('.header-featured-blocks li'), 
    $cur = $lis.first().addClass('active'), 
    $next = $cur.next().addClass('next'); 

    setInterval(function() { 

     $cur.fadeOut(500).delay(500).removeClass('active'); 
     setTimeout(function(){ 
      $cur = $next.removeClass('next').fadeIn(500).addClass('active'); 
     }, 500); 

     $next = $cur.next(); 
     if (!$next.length) { 
      $next = $lis.first(); 
     } 
     $next.addClass('next'); 
    }, 5000); 
}); 

Answer 1

因此，根据我的理解，我对jQuery代码片段进行了一些更改。我已经删除了延迟并让列表项目交叉淡入淡出。所以，当可见的项目淡出时，下一个淡入。为了这个工作，我需要做一些样式更改。我必须将列表项目的位置绝对化，以便交叉淡入处于同一个位置。我还隐藏了所有列表项，然后淡入第一项。

这里是我的建议：

CSS：

.header-featured-blocks ul{ 
    position: relative; 
} 
.header-featured-blocks li { 
    position: absolute; 
    display: none; 
} 

的jQuery：

$(function() { 
    var $lis = $('.header-featured-blocks li'), 
    $cur = $lis.first().addClass('active'), 
    $next = $cur.next().addClass('next'); 
    $cur.fadeIn(500); 
    setInterval(function() { 
     $cur.fadeOut(500).removeClass('active'); 
     $cur = $next.removeClass('next').fadeIn(500).addClass('active'); 
     $next = $cur.next(); 
     if (!$next.length) { 
      $next = $lis.first(); 
     } 
     $next.addClass('next'); 
    }, 5000); 
}); 

我的样本HTML：

<div id="container" class="header-featured-blocks"> 
     <ul> 
      <li>text 1</li> 
      <li>text 2</li> 
      <li>text 3</li> 
      <li>text 4</li> 
      <li>text 5</li> 
     </ul> 
    </div> 

我觉得这比等待一个动画停下来开始下一个更有点“性感”。褪色很不错。

而只是为了使它更加性感，我们可以加少许滑吧：

$(function() { 
    var $lis = $('.header-featured-blocks li'), 
    $cur = $lis.first().addClass('active'), 
    $next = $cur.next().addClass('next'); 
    $cur.fadeIn(500); 
    setInterval(function() { 
     $cur.fadeOut({duration: 500,queue: false}).animate({marginLeft:10}).removeClass('active'); 
     $cur = $next.removeClass('next').css({marginLeft:-10}).fadeIn({duration: 500,queue: false}).animate({marginLeft:0}).addClass('active'); 
     $next = $cur.next(); 
     if (!$next.length) { 
      $next = $lis.first(); 
     } 
     $next.addClass('next'); 
    }, 5000); 
}); 

左我知道如果你需要演示？

编辑：

好吧，我反正做一个演示： https://jsfiddle.net/qx3ftL80/