jquery 显示 div，停留几秒钟，然后以淡入淡出动画关闭

Question

我想在网格更新后显示结果消息 div。

我希望消息 div 会以淡入淡出的动画向下滑动，然后停留 5 秒，然后自动关闭并带有向上滑动的动画

我的代码如下所示。但只有向上滑动动画有效。

$("#gridResult").fadeTo(2000, 500).slideDown(500, function () {
    $("#gridResult").addClass('in');
});

$("#gridResult").fadeTo(2000, 500).slideUp(500, function () {
    $("#gridResult").removeClass('in');
});

Answer 1

您可以使用 jQuery 中的 delay()，请参阅 https://api.jquery.com/delay/

来自文档的样本：

$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );

Answer 2

你可以在 js 上使用这个：

$("#gridResult").slideDown(500, function () {
        $("#gridResult").addClass('in');
    }).delay(5000).slideUp(500, function () {
        $("#gridResult").removeClass('in');
    });

css: 在第一个状态

 #gridResult{
        display: none;
    }

Answer 3

试试这个：

// you need to hide the grid for slide down to work
$("#gridResult").hide().slideDown(500, function () {
    // delay 5 seconds AFTER animation has completed
    $(this).addClass('in').delay(5000).fadeTo(2000, 500).slideUp(500, function () {
        $(this).removeClass('in');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gridResult">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat dui at lacinia ultricies. Ut at massa nec metus pellentesque sodales. Maecenas sit amet tristique nisl. Donec rutrum sapien sed mauris lacinia, nec consequat enim tincidunt. Donec nisl ante, bibendum eget ligula eget, suscipit volutpat leo. Proin scelerisque ultrices urna eget fermentum. Duis rutrum velit quis orci lobortis lobortis. Phasellus hendrerit mi vitae urna pulvinar pretium.</div>

jquery 显示 div，停留几秒钟，然后以淡入淡出动画关闭

jquery show div, stay some seconds and then close with fade animation

jquery

animation

slide