jQuery代码奇怪的表演

Question

好的我有这样的代码：

function swapImages() {  
    $('.recipeImages').each(function() {  
        if($('li.active', this).length == 0) {  
        $('li:first', this).fadeIn(1000, function() { 
                $(this).addClass('active'); 
            });  
        return;  
        }  
        var $active = $('li.active', this);  
        var $next;  

        if($active.next().length == 0)  
            $next = $('li:first', this);  
        else  
            $next = $('li.active', this).next();  

        $active.fadeOut(1000, function() {  
            $active.removeClass('active');  
            $next.fadeIn(1000, function() {  
                $(this).addClass('active');  
            });  
        });  
    });  
}  
swapImages();  
setInterval('swapImages()', 5000);
<ul class="recipeImages">  
    <li style='display:none;'><img src='images/food.jpg' /></li>
    <li style='display:none;'><img src='images/food_cukinija.jpg' /></li>
    <li style='display:none;'><img src='images/food_hamburger.jpg' /></li>
    <li style='display:none;'><img src='images/food_sushi.jpg' /></li>  
</ul>

这里有什么问题？当它转到最后一个LI元素并且没有下一个元素时它会很奇怪。它只是停止，然后第一个出现，再次出现等等......但直到他到达这一点

if($active.next().length == 0)    
    $next = $('li:first', this);

效果很好。

好的，发现了问题。当图像处于绝对位置时，它会以某种方式工作。