平滑切換不同的div（jQuery）

我發現這個不錯的代碼可以在使用next/prev按鈕的各種div之間切換，但是我找不到一種方式讓過渡更平滑，就像淡入/淡出交換。我嘗試添加fadein（）;和fadeout（）;在不同的地方，但我必須做錯事，因爲它沒有改變。我應該如何修改它？平滑切換不同的div（jQuery）

http://jsfiddle.net/hsJbu/36/

<div class="divs"> 
<div class="cls1">1</div> 
<div class="cls2">2</div> 
<div class="cls3">3</div> 
<div class="cls4">4</div> 
<div class="cls5">5</div> 
<div class="cls6">6</div> 
<div class="cls7">7</div> 
</div> 
<a id="next">next</a> 
<a id="prev">prev</a> 



$(document).ready(function(){ 
$(".divs div").each(function(e) { 
    if (e != 0) 
     $(this).hide(); 
}); 

$("#next").click(function(){ 
    if ($(".divs div:visible").next().length != 0) 
     $(".divs div:visible").next().show().prev().hide(); 
    else { 
     $(".divs div:visible").hide(); 
     $(".divs div:first").show(); 
    } 
    return false; 
}); 

$("#prev").click(function(){ 
    if ($(".divs div:visible").prev().length != 0) 
     $(".divs div:visible").prev().show().next().hide(); 
    else { 
     $(".divs div:visible").hide(); 
     $(".divs div:last").show(); 
    } 
    return false; 
}); 
});

來源

2013-11-27 user2660811

更換show()與fadeIn()和hide()與。您還需要爲呼叫添加回調，以便在淡出完成後fadeIn()開始運行。這裏是你的jsfiddle的一個分支：http://jsfiddle.net/a8yJt/。

來源

2013-11-27 00:11:53

demo

$(function(){ 

    var $el = $(".divs > div"), 
     N = $el.length, 
     C = 0;     // Current  

    $el.hide().eq(C).show(); 

    $("#next, #prev").click(function(){ 
     $el.stop().fadeOut().eq((this.id=='next'? ++C : --C) %N).fadeIn(); 
    }); 

});

_{確保CSSposition:absolute;幻燈片的元素，使它們重疊。}

來源

2013-11-27 00:36:26

您只能用fadeIn（）替換show（），也可以給fadeIn（）添加一個時間。

來源

2013-11-27 00:43:17 Jacky

平滑切換不同的div（jQuery）

回答

相關問題