最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Smooth switching between different divs (jQuery) - Stack Overflow

programmeradmin5浏览0评论

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

发布评论

评论列表(0)

  1. 暂无评论