平滑切换不同的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）

回答

相关问题