javascript - 不同div之间的平滑切换(jQuery)

Question

我找到了这个很好的代码，可以使用下一个/上一个按钮在各种 div 之间切换，但我找不到使转换更平滑的方法，比如在切换之间淡入/淡出。我尝试添加 fadein();和淡出()；在不同的地方，但我一定做错了什么，因为它没有改变任何东西。应该如何修改？

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;
});
});

Answer 1

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

});

_{确保 CSS position:absolute; 您的幻灯片元素，以便它们重叠。}