jQuery之effect(成效)

jQuery之effect(效果)
参考资料
从零开始学习jQuery (7) jQuery动画-让页面动起来!
http://www.cnblogs.com/tinawan/archive/2010/11/12/1875743.html
全文代码如下：
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>jQuery效果</title>   
		<style type="text/css">
		.panel {
			margin-left:25%;
			margin-top:5%;
		    padding: 60px;
		    background-color: #546456;
		    color: #FFFFFF;
		    font-size:30px;
		    font-weight: bold;
		    width: 600px;
		    text-align:center;
		}		
		
		input{
			margin-left:25%;
			margin-top:10px;			
		}
		</style>
		<script src="../scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
		<script type="text/javascript" >
		$(function(){		
		   
		   $("input:button").eq(0).bind("click",function(){
		   	   //加上div提高访问速度
		   	  /**
		   	   *匹配的元素将被立即隐藏，没有动画。这大致相当于调用.css('display', 'none')，但display属性值保存在jQuery的数据缓存中，
		   	   *所以display可以方便以后可以恢复到其初始值。如果一个元素的display属性值为inline，然后是隐藏和显示，这个元素将再次显示inline.
		   	   */
		   	   $("div.panel").hide();	
		   	   	   	 
		   }).end()//返回所有按钮
		   .eq(1).click(function(){//绑定第一个按钮事件
		        //匹配的元素将被立即显示，没有动画。这大致相当于调用.css('display', 'block')
		   	    $("div.panel").show();	
		   	    
		   }).end().eq(2).click(function(){
		   	   //当提供一个持续时间参数，.hide()成为一个动画方法。.hide()方法将为匹配元素的宽度，高度，以及不透明度，同时进行动画。一旦透明度达到0，
		   	   //display样式属性将被设置为none，这个元素将不再在页面中影响布局。
		   	   //持续时间是以毫秒为单位的，数值越大，动画越慢，不是越快。字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时,normal
		   	   //$("div.panel").hide("normal");
		   	   //$("div.panel").hide("fast");
		   	   //$("div.panel").hide("slow");
		   	   $("div.panel").hide(2000);
		   	   
		   }).end().eq(3).click(function(){
		   
		   	  $("div.panel").show(2000);
		   	  
		   }).end().eq(4).click(function(){
		   
		   	   $("div.panel").toggle(2000);
		   	   
		   }).end().eq(5).click(function (){
		   	  
		   	  //对隐藏的元素进行动画显示:向下滑动（显示）被选元素
		   	  $("div.panel").slideDown("slow");
		   	  
		   }).end().eq(6).click(function(){
		       
		       //对显示的元素进行动画隐藏:向上滑动（隐藏）被选元素
		   	   $("div.panel").slideUp("slow");
		   	  
		   }).end().eq(7).click(function(){
		   	   //对元素进行显示和隐藏的切换展示:对被选元素切换向上滑动和向下滑动
		   	   $("div.panel").slideToggle("slow");
		   	  
		   }).end().eq(8).click(function(){
		      //对隐藏的元素进行淡化显示效果
		   	  $("div.panel").fadeIn("slow");
		   	  
		   }).end().eq(9).click(function(){
		        //对显示的元素进行淡化的隐藏效果
		   	   $("div.panel").fadeOut("slow");
		   	   
		   }).end().eq(10).click(function(){
		        //把被选元素淡出为给定的不透明度
		   	    $("div.panel").fadeTo("slow",0.2);
		  }).end().eq(11).click(function(){
		        //把被选元素淡出为给定的不透明度
		   	    $("div.panel").animate({fontSize:"1em"},"slow");		   	    
		   });		   
		   
		});
		</script>
    </head>
    <body>
        <div class="panel">
        	HTML 元素默认是静态定位，且无法移动。
		    如需使元素可以移动，请把 CSS 的 position 设置为 relative 或 absolute。
	     </div>
        <input type="button" value="隐藏DIV: hide()" /><br>
        <input type="button" value="显示DIV: show()" /><br>
        <input type="button" value="动画隐藏DIV" /><br>
        <input type="button" value="动画显示DIV" /><br>
        <input type="button" value="jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。" /><br>
        <input type="button" value="jQuery 滑动函数 - slideDown" /><br>
        <input type="button" value="jQuery 滑动函数 - slideUp" /><br>
        <input type="button" value="jQuery 滑动函数 - slideToggle" /><br>
        <input type="button" value="jQuery Fade 函数 - fadeIn()" /><br>
        <input type="button" value="jQuery Fade 函数 - fadeOut()" /><br>
        <input type="button" value="jQuery Fade 函数 - fadeTo()" /><br>
        <input type="button" value="jQuery 自定义动画 - animate()" /><br>
        <br>
        <p><a href="index.jsp">返回</a></p>
    </body>
</html>
jQuery之effect(成效)

相关推荐
