使隐藏的div出现，然后淡出？ [英] Make hidden div appear then fade away?

问题描述

最简单的方法是使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）; 
}）; 
  
   jsFiddle演示  
 
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出现，然后淡出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！