CODEWITHSUNDEEP
jqueryopacity
Robbie Fikes
Robbie Fikes

Reputation: 409

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

The code was edited from show hide divs using Next Previous button using jQuery?

I would like to make a 1000ms opacity css change to the outer div instead of the sudden show/hide but don't know how to do so. The reason I do not want to use fadein/out is because if I place a div inside a div which is in the div container, the innermost div will have its visibility hidden

Here is what I have so far: 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;
});
});

Upvotes: 1

Views: 3661

Answers (1)

renakre
renakre

Reputation: 8291

.fadeTo(1000, 1) or fadeTo(1000, 0) should do it!

Adjust the opacity of the matched elements.

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

Here is demo : https://jsfiddle.net/xzk4patd/18/

Upvotes: 2

Related Questions