在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);
}
});
})