如何将 show/hide 更改为不透明度 0-1(而不是 fadein/out)?

How to change show/hide to opacity 0-1 (not fadein/out)?

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

我想将 1000 毫秒的不透明度 css 更改为外部 div 而不是突然 show/hide 但不知道如何操作。我不想使用 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;
});
});

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

Adjust the opacity of the matched elements.

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

这是演示:https://jsfiddle.net/xzk4patd/18/