Question

我遇到了一些代码，这正是我想要以高效的方式在列表项之间循环的代码。我的问题是，在“下一个”li可以fadeIn（）之前，我需要'活跃'li到fadeOut（）。

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

我已经尝试过策略性地设置设置超时功能，但最终会导致包含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'类。当发生这种情况时，设置超时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/

在列表项之间循环类的淡化动画

1 个答案: