Javascript 在不同div之间平滑切换（jQuery）

我发现这个很好的代码可以使用next/prev按钮在不同的div之间切换，但是我找不到一种方法使转换更平滑，比如在切换之间淡入/淡出。我尝试添加fadein（）；和衰减（）；在不同的地方，但我一定是做错了什么，因为这并没有改变任何事情。我应该如何修改它

1.
2.
3.
4.
5.
6.
7.
下一个
上
$（文档）.ready（函数（）{
元（“.div div”）。每个（函数（e）{
如果（e！=0）
$（this.hide（）；
});
$（“#下一步”）。单击（函数（）{
if（$（“.divs div:visible”）.next（）.length！=0）
$（“.divs div:visible”）.next（）.show（）.prev（）.hide（）；
否则{
$（“.divs div:visible”）.hide（）；
$（“.divs div:first”）.show（）；
}
返回false；
});
$（“#prev”）。单击（函数（）{
if（$（“.divs div:visible”）.prev（）.length！=0）
$（“.divs div:visible”）.prev（）.show（）.next（）.hide（）；
否则{
$（“.divs div:visible”）.hide（）；
$（“.divs div:last”）.show（）；
}
返回false；
});
});

用

fadeIn（）

替换

show（）

，用

fadeOut（）替换
hide（）
。您还需要向
fadeOut（）
调用添加回调，以便
fadeIn（）
在淡出完成后开始运行。这是JSFIDLE的一个分支：.
用
fadeIn（）
替换
show（）
，用
fadeOut（）替换
hide（）
。您还需要向
fadeOut（）
调用添加回调，以便
fadeIn（）
在淡出完成后开始运行。这是您的JSFIDLE的一个分支：。

确保CSS
位置：绝对幻灯片元素，使其重叠
 

确保CSS
位置：绝对幻灯片元素，使其重叠
 您只能将show（）替换为fadeIn（），也可以向fadeIn（）添加时间。
您只能将show（）替换为fadeIn（），也可以向fadeIn（）添加时间

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

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

});