码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 常用方法2(持续更新)

时间:2016-03-10 14:26:33      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:

5.fadeIn()  fadeOut()  fadeToggle()  fadeTo()

fadeIn():用于淡入已隐藏的元素。

fadeOut( ) :方法用于淡出可见元素。

fadeToggle( ) :方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

fadeTo( ) :方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

 

重点:在搞这几个方法时,我想到了另一对方法hide()show()。hide隐藏起来的内容能否被“淡入”,被“淡出”的内容能否被“淡入”。为了方便,我拿fadeToggle方法和show,hide进行试验。发现,他们之间能相互作用!这个发现让我有点小兴奋,附上试验代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="jquery-2.2.1.min.js"></script>
	<script type="text/javascript">
	$(function()
	{
		$(".btn1").click(function()
		{
			$(".test").hide("slow");
		});

		$(".btn2").click(function(){
			$(".test").fadeToggle("slow");
		});

		$(".btn3").click(function(){
			$(".test").show("slow");
		})
	});
	</script>

</head>
<body>

<h2 class="test">This is a heading</h2>
<p class="test">This is a para</p>
<p>This is another</p>
<button type="button" class="btn1">Click me to hide</button>
<button type="button" class="btn3">Click me to show</button>
<button type="button" class="btn2">fadeToggle </button>

</body>
</html>
	

  

jQuery 常用方法2(持续更新)

标签:

原文地址:http://www.cnblogs.com/yns-blogs/p/5261523.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!