jquery show div，停留几秒钟，然后以淡入淡出动画关闭答案

【问题标题】：jquery show div, stay some seconds and then close with fade animationjquery show div，停留几秒钟，然后以淡入淡出动画关闭
【发布时间】：2015-12-04 00:39:24
【问题描述】：

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

我希望消息 div 会随着淡入淡出动画向下滑动，然后停留 5 秒，然后随着向上滑动动画自动关闭

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

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

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

【问题讨论】：

标签： jquery animation slide

【解决方案1】：

试试这个：

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

【讨论】：

【解决方案2】：

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

来自文档的示例：

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

【讨论】：

【解决方案3】：

你可以在js上使用这个：

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

CSS：在第一个状态

 #gridResult{
        display: none;
    }

【讨论】：