我怎样才能对必须消失的 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 个不同的设置。

第一个是div，默认显示id="inserimentoVariazioneAnticipo"。第二个是 div 具有 id="confermaVariazioneAnticipo" 并且我默认隐藏（因为设置了 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 怎么样？

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

参见 this codepen。您可以如前所述使用 jQuery fade in/out 但这应该可以让您继续。也使用样式表而不是内联样式。

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

我怎样才能对必须消失的 div 应用渐变效果，并将渐变效果应用到使用 JQuery 替换它的 div？

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?

html

javascript

css

jquery

jquery-effects