Question

.newsUpdateComplited{
height: auto;
background-color: #C5FFB2;
border:1px solid black;
margin-left:5px;
margin-right:5px;
margin-top:10px;
border-radius: 5px;
padding:3px;
visibility:hidden;

这是我的CSS 我想展示它，并在几秒后减少它。怎么做。我正在寻找一些教程，但我没有找到任何好的东西。请有人帮帮我吗

Answer 1

使用原生Javascript函数setTimeout。 setTimeout需要参数。第一个是函数，第二个是以毫秒为单位的等待时间。这将等待3秒钟显示：

setTimeout( function(){
    $('.newsUpdateComplited').show();
}, 3000 );

您还可以使用jQuery的fadein获得更平滑的效果：

setTimeout( function(){
    $('.newsUpdateComplited').fadeIn();
}, 3000 );

而且，如果您在实际的dom-element .newsUpdateComplited之前插入此代码，则需要添加jQuery的DOM：

$(document).ready( function(){
    setTimeout( function(){
        $('.newsUpdateComplited').fadeIn();
    }, 3000 );
});

Answer 2

你可以在它上面设置一个计时器。这将是4秒。

$('.newsUpdatedComplited').show();
setTimeout($('.newsUpdatedComplited').hide(), 4000);

您可能需要将可见性：隐藏; 更改为显示：无。

Answer 3

已经有JQuery答案和Javascript答案。由于问题不明确，为了多样性，我想建议一个纯CSS替代方案！

您可以指定CSS关键帧动画，如下所示：

@-webkit-keyframes animation {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

然后将其添加到您的newsUpdate元素：

-webkit-animation-name: animation;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode: forwards;

查看this JSFiddle！

免责声明：支持这种做法非常糟糕。

Jquery显示和删除消息

3 个答案: