jQuery高级动画animate()函数详解
- 作者：网页模板
- 类型：文章教程
- 点击次数：
- 发布时间：2014-03-10 16:08
jquery的动画非常强大，如slideDown()、slideUp()等等。但是最强大的还是animated()动画。下面就详细介绍这个函数。
一、语法：animate(params, speed, callback);
参数说明如下：
(1).params:一个包含样式属性及值的映射，比如{property1:”value1″, property2:”value2″,…}
(2).speed:速度参数，可选。
(3).callback:在动画完成时执行的函数，可选。
为了能够配合说明animate()，我们先做如下假设：
有一个空白的HTML文档，里面有一个id=”panel”的div元素
二、自定义简单动画
点击这个div能在页面上横向飘动，我们可以写入下面的jQuery代码：
为了使元素动起来，要更改元素的“left”样式属性。需要注意的是在使用animate()方法之前，为了能够影响该元素的“top”、”left”、”bottom”、”right”样式属性，必须先把元素的poation样式设置为“relative”或者“absolute”。
三、累加、累减动画
在之前的代码中，设置了{left:”500px”}作为动画参数。如果在500px之前加上“+=”或者“-=”符号即表示在当前位置累加或者累减。代码如下：
(1)同时执行多个动画
在上面的例子中，通过控制属性left的值实现了动画的效果，这是一个很简单的动画。如果需要同时执行多个动画，例如在元素向右动画的同时，放大元素的高度。根据animate()方法的语法结构，可以写出如下的jQuery代码：
(2).按顺序执行多个动画
如果想要按顺序执行动画，只需要将代码拆开，然后按照顺序写法就可以了，jQuery代码如下：
接下来将完成更复杂的动画。单击div元素后让它向右移动的同时增大它的高度，并将它的不透明度从50%变换到100%,然后在让它从上到下移动，同时它的宽度变宽，当完成这些效果后，让它可以淡出的方式隐藏。
实现这些功能的jQuery代码如下：
(责任编辑：网页模板)
一、语法：animate(params, speed, callback);
参数说明如下：
(1).params:一个包含样式属性及值的映射，比如{property1:”value1″, property2:”value2″,…}
(2).speed:速度参数，可选。
(3).callback:在动画完成时执行的函数，可选。
为了能够配合说明animate()，我们先做如下假设：
有一个空白的HTML文档，里面有一个id=”panel”的div元素
二、自定义简单动画
点击这个div能在页面上横向飘动，我们可以写入下面的jQuery代码：
$(function () {
$("#panel").click(function () {
$(this).animate({
left: "500px"
}, 3000);
});
});
在本段代码中，首先为id 为“panel”的元素创建一个单击事件，然后对元素加入animate()方法，使元素在3秒（3000毫秒）内，向右移动500像素。为了使元素动起来，要更改元素的“left”样式属性。需要注意的是在使用animate()方法之前，为了能够影响该元素的“top”、”left”、”bottom”、”right”样式属性，必须先把元素的poation样式设置为“relative”或者“absolute”。
三、累加、累减动画
在之前的代码中，设置了{left:”500px”}作为动画参数。如果在500px之前加上“+=”或者“-=”符号即表示在当前位置累加或者累减。代码如下：
$(function () {
$("#panel").click(function () {
$(this).animate({
left: "+=500px"
}, 300); //在当前位置累加500px
});
});
四、多重动画(1)同时执行多个动画
在上面的例子中，通过控制属性left的值实现了动画的效果，这是一个很简单的动画。如果需要同时执行多个动画，例如在元素向右动画的同时，放大元素的高度。根据animate()方法的语法结构，可以写出如下的jQuery代码：
$(function () {
$("#panel").click(function () {
$(this).animate({
left: "500px",
height: "200px"
}, 3000);
});
});
运行代码后，div元素在向右华东的同时，也会放大高度。(2).按顺序执行多个动画
如果想要按顺序执行动画，只需要将代码拆开，然后按照顺序写法就可以了，jQuery代码如下：
$(this).animate({left:"500px"},3000);
$(this).animate({height:"200px"},3000);
因为animate()方法都是对同一个jQuery对象进行操作，所以可以改为链式写法，代码如下：
$(this).animate({
left: "500px"
}, 3000);.animate({
height: "200px"
}, 3000);
五、综合动画接下来将完成更复杂的动画。单击div元素后让它向右移动的同时增大它的高度，并将它的不透明度从50%变换到100%,然后在让它从上到下移动，同时它的宽度变宽，当完成这些效果后，让它可以淡出的方式隐藏。
实现这些功能的jQuery代码如下：
$(function () {
$("#panel").css("opacity", "0.5");
$("#panel").click(function () {
$(this).animate({
left: "400px",
height: "200px",
opacity: "1"
}, 3000).animate({
top: "200px",
width: "200px"
}, 3000).fadeOut("slow");
});
});
运行代码后，动画效果一步步执行完毕。通过这个例子可以看出，为同一元素应用多重效果时，可以通过链式方法对这些效果进行排队。(责任编辑：网页模板)
- 本文标签：
- jQuery animate(),animate()动画,jquery动画
