jQuery之effect(效果)

liuzidong

浏览: 2283321 次
性别:
来自: 成都

最近访客更多访客>>

joechl

njdccy

mushroom12

musicxujun

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Jquery

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之ID选择器 | jQuery之css

2011-08-23 14:59
浏览 2597
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery之effect(效果)

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery之effect(效果)

评论

发表评论

相关推荐

jQuery图表（jqPlot,Highcharts）

jQuery之Ztree

jQuery之弹出层(用于提示)

jQuery之get(txt,xml,json二点注意事项)

jQuery之load

jQuery之ID选择器

jQuery之css

jQuery之select

jQuery之实战(checkbox,table)

jQuery之table(隔行变色)

jQuery之checkbox(复选框)

jQuery之radio(单选)

jQuery之get(val,text,html)

jQuery之ID选择器

jQuery之jqzoom(图片放大镜插件)

jQuery之DOM

jQuery之入门(ready)

jQuery与Java实现图片的剪切

jQueryAPI 中文版及相关参考资料

jQuery对象和DOM对象【jQuery开发注意点(一)】

最近访客更多访客>>