Question

我在下面看到一些为我的网站创建旋转木马效果的代码。我遇到的问题是原始的fadeTo()实际上并没有消失，而是等待淡出时间结束然后跳到下一位。（见下面的小提琴）。

jQuery的：

function next(ul) {
    ul.find("li:first-child").fadeTo(100, 0, function() {
        ul.find("li:first-child").appendTo(ul);
        ul.find("li:last-child").hide();
        ul.find("li:last-child").fadeTo(500, 0.4);
    });
}

HTML：

<div class="carousel-container">
        <button class="prev"><</button>
        <div class="carousel">
            <ul>
                <li style="background-color: #333333">FIRST</li>
                <li style="background-color: #444444">SECOND</li>
                <li style="background-color: #555555">THIRD</li>
                <li style="background-color: #666666">FOURTH</li>
                <li style="background-color: #777777">FIFTH</li>
            </ul>
        </div>
        <button class="next">></button>
    </div>

请参阅fiddle了解CSS（还有很多）。

这个问题与第二行jQuery ul.find("li:first-child").appendTo(ul);有关，好像我删除了这个，然后淡入淡出工作正常，但旋转木马没有。

对于我如何做旋转木马我还有其他建议。这只是我头脑中的第一种方法。

Answer 1

你淡化元素并同时移动它，尝试在100秒的settimeout中包装导致问题的追加线。

由于appendTo（）完成，jQuery fadeTo（）没有褪色

1 个答案: