Question

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

编辑的

我想对外部div进行1000ms不透明度css更改，而不是突然显示/隐藏，但不知道如何操作。我不想使用fadein / out的原因是因为如果我将div放在div容器中的div中，那么最里面的div将隐藏其可见性

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

HTML：

<div class="divs">
<div id="one">
    <div class="content-b">
        <h1>KEYS TO SUCCESS</h1>
        <h3>Digial Design Intern</h3>
        <a href="#"><div id="c">LEARN MORE</div></a>
    </div>
</div>
<div id="two"></div>
<div id="three"></div>
</div>
<div>tesstttttttt</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").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;
});
});

Answer 1

.fadeTo(1000, 1)或fadeTo(1000, 0)应该这样做！

调整匹配元素的不透明度。

https://api.jquery.com/fadeTo/

以下是演示：https://jsfiddle.net/xzk4patd/18/

如何将显示/隐藏更改为不透明度0-1（不是淡入/淡出）？

1 个答案: