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

试试这个:

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

Answer 2

你可以从jQuery中使用delay()，参见https://api.jquery.com/delay/

取自doc:

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

Answer 3

你可以在js:

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

css:第一个状态

 #gridResult{
        display: none;
    }