Javascript 淡出后如何显示div？

我有这个jquery代码，通过淡出当前图像和淡入下一个图像来在图像之间移动。但当它到达最后一个。它最早回到第一个，然后再次淡入

var size = $("#place-gallery1 li").size();
//   alert(size);
$("ul#place-gallery1 li").click(function(){
    $(this).fadeOut(500,function(){
        var nextId= parseInt($(this).attr("id"))+1;
        if (nextId>size) nextId=1;
        alert(nextId);
        $("ul#place-gallery1 li#"+nextId).fadeIn(600);
    });             
});

html:

<ul class="place-gallery" id="place-gallery1">
    <li id="1" class="show-img"><img src="images/img1.jpg" width="237px" height="237px"/></li>
    "<li id="2" class="hide-img"><img src="images/img2.jpg" width="237px" height="237px" /></li>
    "<li id="3" class="hide-img"><img src="images/img3.jpg" width="237px" height="237px" /></li>
    "<li id="4" class="hide-img"><img src="images/img4.jpg" width="237px" height="237px" /></li>
</ul>

“

“

“

---

但是当它到达最后一个li时，它没有返回到第一个，因为代码必须执行

这是图片每5秒旋转一次的示例：

function changeImages() {
  var active_event = $("#place-gallery1 li:visible");
  var next_event = active_event.next();
  if(next_event.size() == 0) next_event = $("#place-gallery1 li:first");
  active_event.fadeOut(500);
  next_event.fadeIn(500);
}

setInterval("changeImages()", 5000);

如果要在单击时更改图像，只需删除setInterval并直接调用changeImages（）函数

$("#place-gallery1 li").on('click', function(){
    $(this).fadeOut(500, function(){
        var next = $(this).next('li');
        if (!next.length) { next = $("#place-gallery1 li:first"); }
        next.fadeIn(600);
    });             
});​

---

您使用的是什么浏览器？您的代码在JSFIDLE中运行良好，在chrome中使用jquery 1.7。我测试了代码，它运行良好。您能提供类的描述吗：show img和hide img？检查这个。我在旋转图像时没有发现任何问题。