带有jQuery的简单幻灯片（不会超出第一个孩子）

Question

I've got a simple slideshow, but it only slides to the second image:

http://jsfiddle.net/tmyie/RCQUx/1/

$('.next').click(function(){
    $('.img:first').fadeOut(function(){
        $(this).next().fadeIn();
    });

});

I'm aware I need to use a $(this) selector. Is there a way to do so, without traversing from .next ? There are often cases where .next will either be a sibling, or a descendent, etc.

Answer 1

Because .img:first will always return the same element. Once an element is faded out you can move it to the end of the queue.

$('.next').click(function () {
    $('.img:first').stop(true, true).fadeOut(function () {
        $(this).next().fadeIn().end().appendTo(this.parentNode);
    });
});

Demo: Fiddle