我如何才能对必须消失的div施加淡入淡出效果，对使用JQuery替换它的div施加淡入效果？

Question

我在JQuery中还很陌生，但实际上我并不热衷于效果和动画。

进入页面我有以下情况：

<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 -->

此代码表示BootStrap模态。

模态主体包含2个不同的部分。

第一个是默认显示id =“ inserimentoVariazioneAnticipo”的div。 第二个是具有id =“ confermaVariazioneAnticipo”的div，默认情况下我是隐藏的（因为设置了tyle =“ display：none;” ）。

好的，当用户单击Varia anticipo按钮（具有id =“ variaAnticipoButton” ）时，将执行以下JQuery函数：

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

我的问题是，当执行此函数时，我想隐藏第一个div（默认情况下显示为id =“ inserimentoVariazioneAnticipo” ），并在其位置显示第二个div（具有id =“ variazioneAnticpoInvalida” ）。

我知道我可以使用show（）和hide（） JQuery函数来做到这一点，但是我想应用一些转换效果，例如在第一个div隐藏时淡出，在第二个div显示时淡入。

或其他一些不错的效果。 如何在这2个div上获得此行为？

Answer 1

如何使用fadeOut和fadeIn呢？

看到这个小提琴。

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

请参阅此代码笔。 您可以如前所述使用jQuery淡入/淡出，但这应该可以助您一臂之力。 也使用样式表，而不要使用内联样式。

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