04jQuery之元素的显示及隐藏和元素淡入淡出、改变元素的高度、滚动条的操作

控制元素的显示及隐藏：

show() 控制元素的显示，hide( )控制元素的隐藏
语法：

$(selector).show([speed],[callback])
$(selector).hide([speed],[callback])

1. speed：可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast
2. callback：可选。show函数执行完之后，要执行的函数

改变元素的透明度（淡入淡出）：

fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果
fadeToggle（）可以实现先淡出后淡出一系列的操作

语法：

$(selector).fadeIn([speed],[callback])
$(selector).fadeOut([speed],[callback])
 $(selector).fadeToggle([speed],[callback])

1. speed：可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast
2. callback：可选。show函数执行完之后，要执行的函数

示例：

	  <script type="text/javascript">
			$(function(){
				$("input").click(function(){
					$("ul").fadeToggle(1000);
				});
			});
		</script>
		<style type="text/css">
			ul,li{
				list-style-type: none;
			}
		</style>


		<input type="button" name="" id="" value="点击" />
	<ul>
		<li>我是帅哥</li>
		<li>zdc帅</li>
		<li>zdc巨帅</li>
		<li>zdc超帅</li>
		<li>zdc帅炸了</li>
	</ul>

改变元素的高度：

slideDown() 可以使元素逐步延伸显示（通过滑动效果，显示）
slideUp()则使元素逐步缩短直至隐藏

语法：

$(selector).slideUp ([speed],[callback])
$(selector).slideDown ([speed],[callback])

示例：

$(document).ready(function() {
       $("h2").click(function(){
	   $(".txt").slideUp("slow");
	   $(".txt").slideDown("slow");
       });
 });

滚动条的操作：

示例：

<img src="img/focus1.jpg" width="200px" height="200px"/>
  <!--添加一个div 出现竖向滚动条-->
  <div class="max-div"></div>
<style>
	*{margin:0;padding:0;}
	img{position:absolute;right:0;top:50px;}
	.max-div{height:1500px;}
  </style>
<script>
		$(function(){
			$(window).scroll(function(){
				var scrollTop = parseInt($(this).scrollTop());//获取滚动条翻上去的距离
				$("img").offset({top:scrollTop+50});//设置img位置
			});
		});
 </script>