使用jQuery循环遍历div

时间:2013-07-25 19:08:05

标签: javascript jquery loops fadeout

我试图让这些div在点击箭头时淡出(就像一个非常简单的幻灯片)。我可以让它们一个接一个地消失,就像这样:

$(document).ready(function(){
    $('li').click(function(){
        $(this).fadeOut();
    });
});

JSFIDDLE

然而,这不会让我

  • 循环(所以当所有淡出时再次开始)
  • 点击其他课程时无法使用

是否有jQuery方法可以遍历每个<li>和fadeOut。如果它是最后一个li,请再次启动序列吗?

1 个答案:

答案 0 :(得分:3)

这是你需要的吗? http://jsfiddle.net/x3buT/39/

在这里,我淡出第一张幻灯片,然后将其移至行尾并在下一行中淡出

$(document).ready(function(){
    $('.slide:not(:first)').hide();
    //If you only need to change with the arrow, remove .slide from next line
    $('.slide,.arrow').click(function(){
        $('.slide').first().fadeOut(function(){
            $(this).next().fadeIn();
            $(this).appendTo('.inner');
        });
        return false;
    });
});