php – 如何使用Jquery各自制作这个技巧？

我的PHP代码：

for($i = 1; $i < 22; $i++) {

    echo '<div id="number" style="display:none">'.$i.'</div>';

}

我的jquery代码：

$('#number').each(function() {

    $(this).slideDown("slow");  

})

这有什么不对？当所有数字一个接一个地出现时,我想实现效果.我的意思是,首先滑下1号,然后是2号,依此类推.现在只滑下1号并且在他之后没有任何事情发生,尽管我每个都使用jquery.谢谢.

解决方法:

首先,您的PHP需要更改,它会呈现无效的HTML,因此：

for($i = 1; $i < 22; $i++) {
  echo '<div id="number" style="display:none">'.$i.'</div>';
}

需要像这样(或者如果不需要则完全删除id)：

for($i = 1; $i < 22; $i++) {
  echo '<div id="number'.$i.'" class="number" style="display:none">'.$i.'</div>';
}

然后你的jQuery应该是这样的：

$('.number').each(function(i) {
  $(this).delay(600*i).slideDown("slow");  
});

You can view a demo here

这将立即显示第一个,第二个600毫秒后(速度“慢”= 600毫秒),第三个在1200毫秒后等,所以它们将一个接一个地发生.我们所做的就是使用.delay()并将集合中元素的索引传递给动画持续时间,因此它们按顺序发生.