本文介绍了使隐藏的div出现,然后淡出?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

最简单的方法是使div出现,然后逐渐消失几秒钟。

  .fade_div {
visibility:none;
position:fixed;
background-color:yellow;
border:1px solid black;
top:300px;
left:300px
}



 < input type =buttonvalue =Add Itemid =mybutton> 

< div class =fade_div>成功添加!< / div>



  $ ).click(function(){
$('。fade_div').....
}


解决方案

以下代码将使 .fade_div 类的元素快速淡入,等待一秒1000ms)并缓慢淡出。

  $('#mybutton' ('.fade_div')。finish()。fadeIn(fast)。delay(1000).fadeOut(slow); 
});
pre>

您可能希望停止使用 visibility:hidden; 并使用 display:none



代替淡入淡出:

  $('#mybutton')。click(function(){
$('。fade_div')。finish ).delay(1000).fadeOut(slow);
});


What is the simplest way to make a div appear then fade a way for a few second?

.fade_div {
    visibility: none;
    position: fixed;
    background-color: yellow;
    border: 1px solid black;
    top: 300px;
    left: 300px
}
<input type="button" value="Add Item" id="mybutton">

<div class="fade_div">Successfully Added!</div>
$('mybutton').click(function(){
    $('.fade_div').....
}
解决方案

The following code will make the elements with .fade_div class fade in quickly, wait one second (1000ms) and fade out slowly.

$('#mybutton').click(function(){
    $('.fade_div').finish().fadeIn("fast").delay(1000).fadeOut("slow");
});

You might want to stop using visibility: hidden; (not none) and use display: none instead.

For an instant appearance instead of fade in:

$('#mybutton').click(function(){
    $('.fade_div').finish().show().delay(1000).fadeOut("slow");
});

jsFiddle Demo

这篇关于使隐藏的div出现,然后淡出?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-21 07:09