如何把show/hide改成fadein/out？

Question

代码编辑自show hide divs using Next Previous button using jQuery?

我想做一个 1000ms fadein/out 而不是突然的 show/hide 但不知道该怎么做。

HTML:

<div class="divs">
<div class="cls1"></div>
<div class="cls2"></div>
<div class="cls3"></div>
</div>

<div id="prev">Prev</div>
<div id="next">Next</div>

CSS:

.cls1{
    background: red;
    height: 200px;
    width: 200px;
}
.cls2{
    background: blue;
    height: 200px;
    width: 200px;
}
.cls3{
    background: green;
    height: 200px;
    width: 200px;
}
#prev{
    background: gray;
    height: 50px;
    width: 50px;
}
#next{
    background: orange;
    height: 50px;
    width: 50px;
}

javascript:

$(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

试试这个？

$(document).ready(function(){
    $(".divs div").each(function(e) {
        if (e != 0)
            $(this).fadeOut('slow');
    });

    $("#next").click(function(){
        if ($(".divs div:visible").next().length != 0)
            $(".divs div:visible").next().fadeIn('slow').prev().fadeOut('slow');
        else {
            $(".divs div:visible").fadeOut('slow');
            $(".divs div:first").fadeIn('slow');
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".divs div:visible").prev().length != 0)
            $(".divs div:visible").prev().fadeIn('slow').next().fadeOut('slow');
        else {
            $(".divs div:visible").fadeOut('slow');
            $(".divs div:last").fadeIn('slow');
        }
        return false;
    });
});

Answer 2

您必须将 'hide' 替换为 'fadeOut'，将 'show' 替换为 'fadeIn'。此外 div 必须在 CSS

中相互重叠

jQuery:

$(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().fadeIn(1000).prev().fadeOut(1000);
    else {
        $(".divs div:visible").fadeOut(1000);
        $(".divs div:first").fadeIn(1000);
    }
    return false;
});

$("#prev").click(function(){
    if ($(".divs div:visible").prev().length != 0)
        $(".divs div:visible").prev().fadeIn(1000).next().fadeOut(1000);
    else {
        $(".divs div:visible").fadeOut(1000);
        $(".divs div:last").fadeIn(1000);
    }
    return false;
});
});

CSS:

.cls1{
   background: red;
   height: 200px;
   width: 200px;
   position: absolute;
}
.cls2{
background: blue;
height: 200px;
width: 200px;
position: absolute;
}
.cls3{
background: green;
height: 200px;
width: 200px;
position: absolute;
}
#prev{
background: gray;
height: 50px;
width: 50px;
}
#next{
background: orange;
height: 50px;
width: 50px;
}
.divs { height: 200px; }

完整代码：jsfiddle.net

Answer 3

所以我假设您想达到 s.th。像这样：

$(".divs > div").each(function (e) {
    if (e != 0) $(this).hide();
});

$("#next").click(function () {
    if ($(".divs > div:visible").next().length != 0) {
        $(".divs > div:visible").fadeOut(1000, function(){
            $(this).next().fadeIn(1000)
        });
    } else {
        $(".divs > div:visible").fadeOut(1000, function () {
            $(".divs > div:first").fadeIn(1000);
        });
    }
    return false;
});

$("#prev").click(function () {
    if ($(".divs > div:visible").prev().length != 0) {
        $(".divs > div:visible").fadeOut(1000, function(){
            $(this).prev().fadeIn(1000);            
        });
    } else {
        $(".divs > div:visible").fadeOut(1000, function () {
            $(".divs > div:last").fadeIn(1000);
        });

    }
    return false;
});

请注意 .fadeIn() (and .fadeOut()) supports a callback-function, which will trigger if the animation is completed. Otherwise your div will jump around, demonstrated here。

如果你想在下面浮动 div，只需删除 position:absolute。您也可以将其设置为 postion:relative.

Demo

如何把show/hide改成fadein/out？

How to change show/hide to fadein/out?

jquery

fade