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

Share Improve this question Follow asked Nov 27, 2013 at 0:09 user2660811user2660811 24344 gold badges99 silver badges1616 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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().