How can I apply a fadout effect to a div that have to disappear and a fade in effect to a div that replaces it using JQuery?

Question

I am pretty new in JQuery and I am really not into effects and animation.

Into a page I have the following situation:

<div id="variazioneAnticipoModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h3 class="modal-title" style="color: #3b5a76;">Variazione Anticipo</h3>
             </div>
             <div id="modal-body" class="modal-body">

                <div id="inserimentoVariazioneAnticipo">
                    <div class="row">
                        <div class="col-md-5">
                            <p style="line-height: 200%;">Inserire la variazione dell'anticipo: </p>
                        </div>

                        <div class="col-md-7">
                            <input id="variazioneAnticipo" class="rightAlligned form-control" style="width:50%" type="number" step="0.01" min="0" />
                        </div>
                    </div>

                    <div id="variazioneAnticpoInvalida" class="alert alert-danger" role="alert" style="display: none; margin-top: 3%;">
                        <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                        <span class="sr-only">Error:</span>
                            Il valore inserito non &egrave; valido
                    </div>
                </div>

                <!-- Hidden by default: -->
                <div id="confermaVariazioneAnticipo" style="display: none;">
                    <h3>Confermare variazione anticipo ?</h3>
                </div>

             </div>

             <div class="modal-footer">
                <button id="chiudiVariaAnticipoButton" type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
                <button id="variaAnticipoButton" type="button" class="btn btn-primary">Varia anticipo</button>
             </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

This code represent a BootStrap modal.

The modal body contain 2 different setion.

The first one is the div having id="inserimentoVariazioneAnticipo" is shown by default. The second one is the div having id="confermaVariazioneAnticipo" and i hidden by default (because have setted the tyle="display: none;" ).

Ok, when the user click on the Varia anticipo button (having id="variaAnticipoButton" ), the following JQuery function is performed:

$("#variaAnticipoButton").click(function() {
    alert("Variazione Anticipo");
});

My problem is that when this function is perfromed I want that hide the first div (the one showed by default having id="inserimentoVariazioneAnticipo" ) and in its place display the second hidden div (the one having id="variazioneAnticpoInvalida" ).

I know that I can do it using the show() and the hide() JQuery function but I want to it applying some transiction effect like fade out when the first div is hidden and fade in when the second div is shown.

Or some nice other effects. What can I do to obtain this behavior on these 2 divs?

Answer 1

How about using fadeOut and fadeIn ?

See this fiddle.

JavaScript

$(function(){
    setTimeout(function(){
        $("#div1").fadeOut(1000, function(){
            $("#div2").fadeIn(1000);
        });
    }, 500);
});

HTML

<div id="div1">
    <h1>
        Div 1
    </h1>
</div>

<div id="div2">
    <h1>
        Div 2
    </h1>
</div>

CSS

#div1, #div2 {
    width: 300px;
    height: 200px;
}

#div1{
    background: skyblue;
}

#div2{
    background: green;
    display: none;
}

Answer 2

See this codepen. You can use jQuery fade in/out as previously mentioned but this should get you going. Use stylesheets instead of inline styling too.

$("#variaAnticipoButton").click(function() {
      $("#variazioneAnticpoInvalida").css("display", "block");
      $("#inserimentoVariazioneAnticipo").css("display", "none");
    });