jQuery：来自 PHP 循环的 fadeTo/fadeOut 项

Question

所以我对 jQuery 完全陌生。我一直在尝试这一天，但还没有成功。

我有一个包含 div 的 php 循环，我想做的是淡入第一个项目，淡出它，然后淡入下一个，依此类推。

到目前为止我已经想到了这个：

php 循环在另一个 div 中用 ID #container
然后我使用 css position:absolute 给项目相同的位置。然后 opacity:0.0 让它们在开始时全部隐藏。

然后 jQuery fadeIn/fadeOut 的时间到了。因为我从不透明度 0.0 开始，所以我似乎不能使用 fadeIn，所以我改用 fadeTo。然后我想我必须将 ID 分配给所有 div，因为我不知道循环包含多少项。然后使用 .each 来 fadeTo/fadeOut 每个项目。

但我没弄对。显然我做错了什么。

这是我想出的jQuery：

$(document).ready(function() {
    $( '#container div' ).each( function(i) {
        $(this).attr('id', 'item-'+(i+1) );
    });

    $( '#container div' ).each( function(i) {
        $( '#item-'+(i+1) ).fadeTo(3000, 1).delay(3000).fadeOut('slow');
    });
});

我还应该说，在这种情况下我不能用 PHP 循环分配 ID，然后用 jQuery 得到它们。需要使用 jQuery.

分配 ID

Answer 1

试试这个方法。 Fiddle.

HTML:

<div id='cntr'>
    <div></div>
    <div></div>
    <div></div>
    <!-- ... etc ... -->
</div>

CSS

#cntr { background: blue; width: 100px; height: 100px; position: relative; }
#cntr div { position: absolute; width: 90px; height: 90px; left: 5px; top: 5px; opacity: 0; }
#cntr div:nth-child(1) { background: red; }
#cntr div:nth-child(2) { background: green; }
#cntr div:nth-child(3) { background: gray; }
#cntr div:nth-child(4) { background: purple; }
#cntr div:nth-child(5) { background: orange; }
#cntr div:nth-child(6) { background: yellow; }

然后这只是一个启动一系列超时的情况，每个项目一个（它将适用于任意数量的 child 元素），基于所需的动画持续时间乘以 child.

换句话说，如果我们的动画持续时间是 500（毫秒），第一个 child（索引 0）立即开始（500 x 0）；第二个 child 在 500 毫秒 (1 x 500) 之后，第三个在 1 秒 (500 x 2) 之后等等。

var animDuration = 1000;
$('#cntr div').each(function(i) {
    setTimeout(function() {
        $(this).animate({opacity: 1}, animDuration);
    }.bind(this), i * animDuration);
});

Answer 2

这个怎么样

$(document).ready(function () {
 $('#container div').each(function (index) {
    $(this).prev().fadeOut();
    $(this).delay(600*index).fadeIn(500);
  });
});

示例：http://jsbin.com/lacumejiga/1/

Answer 3

无数解决方案之一：

function slide() {
$( '#container div:first' ).fadeTo(3000, 1).fadeTo(1000,0, function() {
$( "#container" ).append( '<div>'+$(this).html()+'</div>' );
$(this).remove();
});
}

setInterval(slide,1000);

要了解这里发生了什么，请查看演示：http://jsfiddle.net/1xzw6fw0/，然后打开检查器并检查 HTML（Win 系统上的 F12，我在 Firefox 中使用 Web 开发人员工具）。

想法是：淡入容器中的第一个元素，然后当它是 hidden/animation complete/opacity:0 - 你会看到附加函数作为 fadeTo() 的参数 - 该函数将它附加到容器的 END，并从 DOM 中删除当前元素，所以现在第一个元素是最后一个，第二个是第一个，依此类推...

希望你明白了吗？最后 - 我们将每秒调用函数 slide() - 您可以更改它以满足您的需要...

jQuery：来自 PHP 循环的 fadeTo/fadeOut 项

jQuery: fadeTo/fadeOut items from a PHP Loop

each

jquery

fadeout

fadeto