Question

我发现这个很好的代码可以使用next / prev按钮在各种div之间切换，但是我找不到一种方法来使转换更加平滑，比如切换之间的淡入/淡出。我尝试添加fadein（）;和fadeout（）;在各个地方，但我必须做错事，因为它没有改变nothning。我应该如何修改它？

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;您的幻灯片元素，以便它们重叠。}

Answer 2

将show()替换为fadeIn()，将hide()替换为fadeOut()。您还需要向fadeOut()调用添加回调，以便在淡出完成后fadeIn()开始运行。这是你的jsfiddle的一个分支：http://jsfiddle.net/a8yJt/。

Answer 3

你只用fadeIn（）替换show（），也可以为fadeIn（）添加时间。

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

3 个答案: