I've found this nice code to switch between various divs using next/prev buttons but I can't find a way to make the transition more smooth, something like fade in/out between switching. I tried adding fadein(); and fadeout(); in various places but I must be doing something wrong because it didn't change nothning. How should I modify it?

/

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

I've found this nice code to switch between various divs using next/prev buttons but I can't find a way to make the transition more smooth, something like fade in/out between switching. I tried adding fadein(); and fadeout(); in various places but I must be doing something wrong because it didn't change nothning. How should I modify it?

http://jsfiddle/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;
});
});

• javascript
• jquery
• css
• html

3 Answers 3

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

});

_{Make sure to CSS position:absolute; your slide elements so that they overlap.}

Replace show() with fadeIn() and hide() with fadeOut(). You'll also need to add callbacks to the fadeOut() call so that fadeIn() starts running after the fade out is pleted. Here is a fork of your jsfiddle: http://jsfiddle/a8yJt/.

You only replace show() with fadeIn(),also can add a time to the fadeIn().