在jQuery中，虽然有很多动画方法，实现各种各样的动画效果，但综合起来，绝大部分的动画方法仅仅是改变元素的属性或样式，如高度、宽度、透明度和CSS样式属性，详细说明如下：
一、各种动画方法说明
- show()与hide()方法，元素以动画效果实现显示与隐藏，可以同时改变元素的多个属性，如宽度、高度、透明度。
- fadeIn()与fadeOut()方法，元素以动画效果淡入淡出，仅改变元素的透明度。
- slideUp()与slideDown()方法，元素以“卷窗帘”的动画效果显示与隐藏，仅改变元素的高度，其他属性不发生变化。
- fadeTo()方法，元素按指定的透明度进行渐进式调整，从而达到一种动画效果，该方法改变的是元素的透明度，宽度与高度不发生变化。
- toggle()方法，可以代替show()与hide()两个方法，因此，其改变的元素属性也与show()与hide()方法一样。
- slideToggle()方法，可以代替slideUp()与slideDown()两个方法，改变的元素也与slideUp()和slideDown()方法一样。
- animate()方法，自定义元素的动画效果，可以实现上述6种方法中全部属性改变的功能，同时，还可以用动画的效果，改变其他的元素属性，该方法是上述6种方法的核心。
二、使用animate()方法代替其他动画效果
animate()方法不仅可以使元素实现各种各样的动画效果，还可以代替其他的动画方法，详细代码如下所示：
- animate()方法代替hide()方法，代码如下：
$("页面元素").animate({ height:"hide", width:"hide", opacity:"hide"}, 600);等价于下列代码：$("页面元素").hide(600);
- animate()方法代替fadeOut()方法，代码如下：
$("页面元素").animate( {opacity:"hide"}, 600);等价于下列代码：$("页面元素").fadeOut(600);
- animate()方法代替slideUp()方法，代码如下：
$("页面元素").animate({height:"hide"}, 600);等价于下列代码：$("页面元素").slideUp(600);
- animate()方法代替fadeTo()方法，代码如下：
$("页面元素").animate({opacity:"0.8"}, 600);等价于下列代码：$("页面元素").fadeTo(600, "0.8");
三、综合案例分析——动画效果浏览相册中的图片
该案例需求如下：
- 将尺寸不同的相片统一成高度与宽度相同的缩略图，展示在页面中。
- 当单击“点击放大”链接时，以动画的效果放大至其原始图片，同时，隐藏“点击放大”链接，显示改图的基本信息。
- 当点击原始图片中的“关闭”按钮时，以动画的效果将图片缩小成单击前的缩略图，即返回到图片初始状态。
- 在浏览放大后的原始图片时，又单击其他缩略图，那么，处于放大状态的原始图片自动以动画效果关闭，使得整个相册始终只有一个图片处于放大状态。
#======================================================================== # FileName: demo29.html # Author: lowkey # Email: 361789273@qq.com # HomePage: http://blog.csdn.net/Iamduoluo # LastChange: 2012-04-13 17:07:54 #======================================================================== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>动画方式浏览图片</title> <script src="../jquery.js" type="text/javascript" charset="utf-8"></script> <link type="text/css" href="Css/css_Animate.css" rel="Stylesheet" /> <script type="text/javascript" src="Jscript/js_Animate.js"></script> </head> <body> <div class="p_Lst"> <img alt=""src="images/list_1.jpg" /> <div class="p_Alt"> <h3>风景一</h3> </div> </div> <div class="p_Lst"> <img alt=""src="images/list_2.jpg"/> <div class="p_Alt"> <h3>风景二</h3> </div> </div> <div class="p_Lst"> <img alt=""src="images/list_3.jpg"/> <div class="p_Alt"> <h3>风景三</h3> </div> </div> <div class="p_Lst"> <img alt=""src="images/list_4.jpg"/> <div class="p_Alt"> <h3>风景四</h3> </div> </div> </body> </html> #======================================================================== # FileName: css_Animate.css # Author: lowkey # Email: 361789273@qq.com # HomePage: http://blog.csdn.net/Iamduoluo # LastChange: 2012-04-13 17:08:31 #======================================================================== body {font-size:13px} /*图片外框样式*/ .p_Lst { position: relative; float: left; width: 90px; height: 98px; padding: 8px; border: 1px solid #666; margin: 10px 8px 20px 8px; } /*图片最近外框样式*/ .p_Img { width: 90px; height: 90px; margin-bottom: 5px; overflow: hidden; } /*图片信息样式*/ .p_Alt { display:none; } /*缩略图片中“点击放大”链接样式*/ .p_Big { display: block; width: 90px; height: 23px; background: url(../Images/imgLarge.jpg); cursor: pointer; } /*原始放大图片中“关闭”按钮样式*/ .p_Cls { position: absolute; right: 10px; bottom: 10px; display: block; width: 20px; height: 21px; background: url(../Images/imgClose.jpg); text-indent: -9999px; } #======================================================================== # FileName: js_Animate.js # Author: lowkey # Email: 361789273@qq.com # HomePage: http://blog.csdn.net/Iamduoluo # LastChange: 2012-04-13 17:09:01 #======================================================================== /// <reference path="jquery-1.4.2-vsdoc.js"/> /// <reference path="jquery-1.4.2.js"/> $(function() { var curIndex = -1; //初始化当前打开图片值 var intImgL = "-120px"; var intImgT = "-120px"; //带参数index遍历图片外框Div $(".p_Lst").each(function(index) { var $this = $(this); //获取每个外框Div var $img = $this.find("img"); //查找其中的图片元素 var $info = $this.find(".p_Alt"); //查询其中的图片信息元素 var arrPic = {}; //定义一个空数组保存初始的长与宽 arrPic.imgw = $img.width(); arrPic.imgh = $img.height(); arrPic.orgw = $this.width(); arrPic.orgh = $this.height(); $img.css({ //设置初始时的图片外边距位置 marginLeft: intImgL, marginTop: intImgT }); //将图片、点击放大链接、关闭按钮放入外框Div中 var $drag = $("<div class='p_Img'>").append($img).prependTo($this); var $open = $("<a href='javascript:void(0)' class='p_Big' title='点击放大'></a>").appendTo($this); var $clos = $("<a href='javascript:void(0)' class='p_Cls' title='点击关闭'></a>").appendTo($info); //保存放入元素后的外框Div的长与宽 arrPic.dragw = $drag.width(); arrPic.dragh = $drag.height(); //放大按钮单击事件 $open.click(function() { $this.animate({ //外框动画 width: arrPic.imgw, height: (arrPic.imgh + 85), //85是图片信息的高度, borderWidth: "5" }, 3000); $open.fadeOut(); //点击放大链接淡出 $(".p_Alt", $this).fadeIn(); //图片提示信息淡入 $drag.animate({ //加入图片后的Div框动画 width: arrPic.imgw, height: arrPic.imgh }, 3000); $img.animate({ //以动画的形式自动调整位置 marginTop: "0px", marginLeft: "0px" }, 3000); //获取当前被放大成原始图的图片各组成部分 var $f_this = $(".p_Lst:eq(" + curIndex + ")"); var $f_open = $(".p_Big:eq(" + curIndex + ")"); var $f_drag = $(".p_Img:eq(" + curIndex + ")"); var $f_larg = $(".p_Alt:eq(" + curIndex + ")"); var $f_imgs = $("img:eq(" + curIndex + ")"); if (curIndex != -1) { //如果当前有已放大的图片 //自动以动画的形式关闭该图片 cls_Click($f_this, $f_open, $f_drag, $f_imgs, $f_larg); } //重新获取当前放大图片的索引号 curIndex = index; }); //关闭按钮单击事件 $clos.click(function() { //以动画的形式缩小当前所点击的图片 cls_Click($this, $open, $drag, $img, 1); //初始化索引号 curIndex = -1; }); /* *@param 参数pF表示图片最外层Div *@param 参数pO表示图片点击前的放大按钮 *@param 参数pW表示紧邻图片层Div *@param 参数pI表示紧选中的图片元素 *@param 参数blnS表示图片中的说明内容 */ function cls_Click(pF, pO, pW, pI, blnS) { var $strInit; pF.animate({ width: arrPic.orgw, height: arrPic.orgh, borderWidth: "1" }, 3000); pO.fadeIn(); if (blnS) { $strInit = $(".p_Alt", pF); } else { $strInit = blnS; } $strInit.fadeOut(); pW.animate({ width: arrPic.dragw, height: arrPic.dragh }, 3000); pI.animate({ marginTop: intImgT, marginLeft: intImgL }, 3000); } }); })
368
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
