Question

所以我对jQuery完全不熟悉。而且我一整天都在尝试这一点而没有任何成功。

我有一个包含div的php循环，我想要做的是淡化第一个项目，淡出它，然后淡化下一个等等。

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

php循环在id为#container
然后我使用css position:absolute为项目提供相同的位置。然后opacity:0.0将它们全部隐藏起来。

然后是jQuery for 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获取它们。 Id需要使用jQuery asign。

Answer 1

这个怎么样

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

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

Answer 2

无数解决方案之一：

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

setInterval(slide,1000);

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

理念是：淡入容器中的第一个元素，然后当它被隐藏/动画完成/不透明度：0 - 你看到附加函数作为fadeTo（）的参数 - 该函数将它附加到容器的END，并删除来自DOM的当前元素，所以现在第一个元素是最后一个，第二个元素是第一个，等等......

希望你明白了吗？最后 - 我们将每秒调用函数slide（） - 您可以根据需要更改它...

jQuery：PHP循环中的fadeTo / fadeOut项

2 个答案: