JQuery 渐变显示隐藏动画 ( fadeIn(),fadeOut(),fadeTo() )

最新推荐文章于 2022-03-19 10:32:21 发布

houyanhua1

最新推荐文章于 2022-03-19 10:32:21 发布

阅读量3.1k

点赞数

分类专栏： JQuery 文章标签： jquery

本文链接：https://blog.csdn.net/houyanhua1/article/details/78842714

版权

JQuery 专栏收录该内容

57 篇文章 0 订阅

订阅专栏

$('#div1').fadeIn(1000); //渐变显示。1000毫秒，表示动画显示过程时间。
$('#div1').fadeOut(1000); //渐变隐藏
$('#div1').fadeToggle(1000); //合成显示隐藏
$('#div1').fadeTo(1000,0.5); //半透明显示到0.5。 CSS属性opacity 透明度(0-1)。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>渐变显示隐藏动画</title>
	<style>
	#div1 {
		width:100px; height:100px;
		background-color:black;
	}
	</style>
    <script src="scripts/jquery-1.7.1.min.js"></script>
    <script>
        $(function() {
			//渐变显示按钮
            $('#btnFadeIn').click(function(){
				//$('#div1').fadeIn();
				$('#div1').fadeIn(1000);  //1000毫秒，表示动画渐变过程时间。
			});

			//渐变隐藏按钮
			$('#btnFadeOut').click(function(){
				//$('#div1').fadeOut();
				$('#div1').fadeOut(1000);
			});

			//合成按钮
			$('#btnTotal').click(function(){
				//$('#div1').fadeToggle();
				$('#div1').fadeToggle(1000);
			});

			//半透明显示按钮
			$('#btnBan').click(function(){
				$('#div1').fadeTo(1000,0.5);  //半透明显示到0.5。 CSS属性opacity 透明度(0-1)。
			});
        });
    </script>
</head>
<body>
    <input type="button" id="btnFadeIn" value="显示"/>
    <input type="button" id="btnFadeOut" value="隐藏"/>
	<input type="button" id="btnTotal" value="合成"/>
	<input type="button" id="btnBan" value="半透明"/>
	<div id="div1"></div>
</body>
</html>

houyanhua1

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery 渐变显示隐藏动画 ( fadeIn(),fadeOut(),fadeTo() )

$('#div1').fadeIn(1000); //渐变显示。1000毫秒，表示动画显示过程时间。$('#div1').fadeOut(1000); //渐变隐藏$('#div1').fadeToggle(1000); //合成显示隐藏$('#div1').fadeTo(1000,0.5); //半透明显示到0.5。 CSS属性opacity 透明度(0-1)。
复制链接

扫一扫