javascript - 使用列表项之间的类循环淡入淡出动画

Question

我遇到了一些代码，这正是我正在寻找的以高效方式在列表项之间循环的代码。我的问题是，在“下一个”li 可以 fadeIn() 之前，我需要它们将“事件”li 传递给 fad​​eOut()。

我现在拥有的是公然过渡，我正在寻找更“性感”的东西，这就是为什么我希望它在过渡之间淡出。

我曾尝试有策略地放置设置超时函数，但最终导致包含的 div 通过转换改变大小(显然是因为我在不正确的时间切换)。

这是我用于转换的代码:

$(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);
});

这是我试图获得平滑过渡的失败尝试。希望这会帮助其他人理解我想要实现的目标。

我的想法是:淡出当前的“active”，等到它淡出，然后从元素中删除“active”类。当发生这种情况时，在前面提到的 Action 发生时设置 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/