jQuery fadeIn（），fadeOut（）和fadeTo（）示例

短命女 2023-02-15 07:48 13阅读 0赞

jQuery带有三种方便的方法来轻松创建褪色效果。

1.  fadeIn（）–显示匹配的元素并具有淡入效果。
2.  fadeOut（）–隐藏具有淡入/透明效果的匹配元素。
3.  fadeTo（）–使匹配的元素淡入某些不透明度。

以上三种方法都是将支持持续时间作为参数：慢速，快速或精确毫秒。 如果省略此参数，则默认为400毫秒。

## 自己尝试 ##

<html>
    <head>
    
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    
    <style type="text/css">
    	.fadeOutbox, .fadeInbox, .fadeTobox{
    		float:left;
    		padding:8px;
    		margin:16px;
    		border:1px solid red;
    		width:200px;
    		height:50px;
    		background-color:#000000;
    		color:white;
    	}
    	.clear{
    		clear:both;
    	}
    </style>
    
    </head>
    
    <body>
    
    <h1>jQuery fadeIn(), fadeOut() and fadeTo() example</h1>
    
    
    <div class="clear">
    	<h2>fadeOut() example</h2>
    	
    	<div class="fadeOutbox">
    		Click me - fadeOut()
    	</div>
    	
    	<div class="fadeOutbox">
    		Click me - fadeOut()
    	</div>
    </div>
    
    <div class="clear">
    	<h2>fadeIn() example</h2>
    	
    	<div class="fadeInbox">
    		Click me - fadeIn()
    	</div>
    	
    	<div class="fadeInbox">
    		Click me - fadeIn()
    	</div>
    </div>
    
    <div class="clear">
    	<h2>fadeTo() example</h2>
    	
    	<div class="fadeTobox">
    		Click me - fadeTo()
    	</div>
    	
    	<div class="fadeTobox">
    		Click me - fadeTo()
    	</div>
    </div>
    
    
    <div class="clear">
    	<button id=reset>Reset</button>
    </div>
    
    <script type="text/javascript">
    
    $(".fadeOutbox").click(function () {
       $(this).fadeOut('slow');
    });
    
    $(".fadeInbox").click(function () {
       $(this).hide().fadeIn(2000);
    });
    
    $(".fadeTobox").click(function () {
       $(this).fadeTo('fast',0.2);
    });
    
    $("#reset").click(function(){
    	location.reload();
    });
    </script>
    
    </body>
    </html>

[试试演示][Link 1]

标签： [jquery][] [jquery效果][jquery 1]

> 翻译自: [https://mkyong.com/jquery/jquery-fadein-fadeout-and-fadeto-example/][https_mkyong.com_jquery_jquery-fadein-fadeout-and-fadeto-example]

[Link 1]: http://www.mkyong.com/wp-content/uploads/jQuery/jQuery-fadeIn-faceOut-fadeTo-example.html
[jquery]: https://mkyong.com/tag/jquery/
[jquery 1]: https://mkyong.com/tag/jquery-effects/
[https_mkyong.com_jquery_jquery-fadein-fadeout-and-fadeto-example]: https://mkyong.com/jquery/jquery-fadein-fadeout-and-fadeto-example/