Question

代码是从show hide divs using Next Previous button using jQuery?

编辑的

我想制作一个1000毫秒的淡入/淡出而不是突然显示/隐藏但不知道该怎么做。

以下是我目前的情况：https://jsfiddle.net/xzk4patd/

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

您必须替换“隐藏”＃39;与'fadeOut＆＃39;和＆＃39;显示＆＃39;与＆＃39;淡出＆＃39;。另外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()（和.fadeOut()）支持回调函数，如果动画完成则会触发该函数。否则，div会跳转，展示here。

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

<强> Demo

如何将show / hide更改为fadein / out？

3 个答案: