Question

我做了简单的div淡入循环。有些div在外部div中，而在另一个外部div中。我写了一个脚本，通过淡入淡出来循环这些div。但是有一个问题，div已经退出，但很快就会出现。

请参阅此fiddle并看到这种丑陋的效果。

JS：

function tick() {
    var $obj = $(".major_data .commitment_box .commitment");
    $obj.first().fadeIn().delay(1000).fadeOut(function () {
        $obj.first().insertAfter($obj.last());
        tick();
    });
}
tick();

当循环重复时，效果变得正确。如何在循环的第二个循环中实现效果？

Answer 1

“但是有一个问题，div已经退出，但很快就会出现。”

我假设您试图说“divs 淡出”开头。如果你说你希望所有div都隐藏起来，那么即使是第一个div也会消失，只需更改以下行：

var $obj = $(".major_data .commitment_box .commitment");

......对此：

var $obj = $(".major_data .commitment_box .commitment").hide();

Answer 2

试试这个：

function tick() {
        var $obj = $(".major_data .commitment_box .commitment").hide();
        $obj.first().fadeIn(1000).fadeOut(function () {
            $obj.first().insertAfter($obj.last());
            tick();
        });
    }
    tick();

使用.fadeIn(1000)以避免立即消失

DEMO

或者

function tick() {
    var $obj = $(".major_data .commitment_box .commitment").hide();
    $obj.first().fadeIn(1000,function () {
        $(this).fadeOut();
        $obj.first().insertAfter($obj.last());
        tick();
    });
}
tick();

DEMO

Answer 3

当你第一次循环时，所有.commitment div都已经可见了，所以jQuery没有任何内容可以fadeIn。第二轮，它们是之前fadeOut的隐藏原因，因此这次fadeIn确实有效。

解决方案是最初隐藏你的。commitment div。我会通过向您的css添加.commitment { display: none; }来实现此目的。

我怎么能首先fadeIn（）然后fadeOut（）然后insertAfter（）？

3 个答案: