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 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>