0

我制作了简单的 div 淡入淡出循环。一些 div 在外部 div 中，而在另一个外部 div 中。我编写了一个脚本，通过淡入和淡出循环这些 div。但是有一个问题，div淡出但淡入。

看看这个小提琴，看看那个丑陋的效果。

JS：

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

当一个循环自己重复时，效果就变得正确了。怎样才能达到循环第二个循环的效果呢？

4

3 回答 3

3

“但有一个问题，divs淡出但淡入。”

我假设您一开始就想说“div没有淡出”。如果您说您希望所有 div 一开始都是隐藏的，那么即使是第一个也会淡入，只需更改以下行：

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

...对此：

var $obj = $(".major_data .commitment_box .commitment").hide();
于 2013-07-14T12:07:48.117 回答
0

当你第一次循环访问它们时，你所有.commitment的 div 都已经可见，所以 jQuery 没有任何东西可以fadeIn. 第二轮，他们是上一轮的隐藏原因fadeOut，所以这次fadeIn确实奏效了。

解决方案是最初隐藏您的 . commitment分区。我会通过添加.commitment { display: none; }到你的 CSS 来做到这一点。

于 2013-07-14T12:17:04.500 回答
0

尝试这个：

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)避免立即淡入

演示

或者

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

演示

于 2013-07-14T12:14:27.957 回答