admin管理员组

文章数量:1332108

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;
});
});
Share Improve this question asked Nov 27, 2013 at 0:09 user2660811user2660811 2434 gold badges9 silver badges16 bronze badges
Add a ment  | 

3 Answers 3

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

本文标签: javascriptSmooth switching between different divs (jQuery)Stack Overflow