如何在淡出後顯示div？

我有這jQuery代碼之間移動圖像之間淡出當前圖像，並褪色下一個英寸。但是當它達到最後一個。它最回到第一，再次消失吧.. 如何在淡出後顯示div？

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>

但是當它到達最終李，因爲代碼必須做它沒有回第一

來源

2012-02-24 Bader

您使用的是什麼瀏覽器？你的代碼在jsfiddle中工作得很好，在Chrome中使用jquery 1.7。 – 2012-02-24 17:26:08

選中此項[jsFiddle中的DEMO]（http://jsfiddle.net/8CpDf/）。我在旋轉圖像中看不到任何問題。 – 2012-02-24 17:31:57

我測試了代碼，它工作正常。你能否提供類的描述：show-img和hide-img？ – 2012-02-24 17:30:59

這是圖片每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);

如果你想改變圖像的onClick，強制除去setInterval並直接調用changeImages（）函數。

來源

2012-02-24 17:26:42

$("#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); 
    });    
});

FIDDLE

來源

2012-02-24 17:33:21 adeneo

如何在淡出後顯示div？

回答

相關問題