jQuery: PHP循环中的fadeTo/fadeOut项

Question

所以我对jQuery完全陌生。我已经试了一整天了，但还没有成功。

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

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

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

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

但是我做不好。显然我做错了什么。

这是我想出来的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进行分配。

Answer 1

无数解决方案之一:

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() -该函数追加到容器的结束，并从DOM中删除当前元素，所以现在第一个元素是最后一个，第二个是第一个，等等，等等…

希望你得到了它?在最后-我们将每秒调用函数slide() -您可以根据您的需要更改它…

Answer 2

试试这个方法。小提琴 .

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; }

那么它只是一个启动超时序列的情况，每个项目一个(它将适用于任何数量的子元素)，基于所需的动画持续时间乘以子元素的索引。

换句话说，如果我们的动画持续时间是500 (ms)，第一个子节点(索引0)立即开始(500 x 0);500ms后第二个子代(1 × 500)， 1秒后第三个子代(500 × 2)，依此类推。

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

Answer 3

这个怎么样

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

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