文章源自:http://viralpatel.net/blogs/understanding-jquery-animate-function/
Understanding jQuery animate() function
jQuery animate() function is very powerful API to manipulate html elements and add animation functionality. The use of animate function is very simple. First lets check the syntax of this function.
.animate( properties, [ duration ], [ easing ], [ callback ] )
- properties: A map of CSS properties that the animation will move toward.
- duration: A string or number determining how long the animation will run.
- easing: A string indicating which easing function to use for the transition.
- callback: A function to call once the animation is complete.
.animate( properties, options )
- properties: A map of CSS properties that the animation will move toward.
- options: A map of additional options to pass to the method. Supported keys:
- duration: A string or number determining how long the animation will run.
- easing: A string indicating which easing function to use for the transition.
- complete: A function to call once the animation is complete.
- step: A function to be called after each step of the animation.
- queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately.
- specialEasing: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4).
Lets learn the animate() function with set of examples.
First include the jQuery javascript library in your html file. Add following in your html <HEAD> tag:
<SCRIPT type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></SCRIPT>
For all the demos, we will use a sample DIV tag for animating. Following is the div code and its stylesheet.
<style type="text/css">
#content {
background-color:#ffaa00;
width:300px;
height:30px;
padding:3px;
}
</style>
<input type="button" id="animate" value="Animate"/>
<div id="content">Animate Height</div>
Animate height/width
Animating height and width in jQuery is very easy. Lets assume you have a DIV that you want to animate i.e. increase the height.
$("#animate").click(function() {
$("#content").animate(
{"height": "80px"},
"fast");
});
Also following will be the code to animate Width of the element.
$("#animate").click(function() {
$("#content").animate(
{"width": "350px"},
"fast");
});
Animate opacity
$("#animate").click(function() {
$("#content").animate(
{"opacity": "0.15"},
"slow");
});
Moving elements using animate()
<STYLE>
#content {
background-color:#6688ff;
position:absolute;
width:100px;
height:100px;
padding:3px;
margin-top:5px;
left: 100px;
}
</STYLE>
<input type="button" id="left" value="Left"/>
<input type="button" id="right" value="Right"/>
<div id="content">Move</div>
$("#right").click(function() {
$("#content").animate(
{"left": "+=50px"},
"slow");
});
$("#left").click(function() {
$("#content").animate(
{"left": "-=50px"},
"slow");
});
Callback Function
Callback functions are very useful to perform certain activity when the animation is completed. Also note here when multiple elements are mapped with the animation and we have specified a callback function. Then the callback will get called for each of the element.
Let us see an example where we use callback function to display a message when animation is completed.
$("#animate").click(function() {
$("#content").animate(
{"height": "100px", "width": "250px"},
"slow", function(){
$(this).html("Animation Completed");
});
});
Combine multiple animations
You may want to combine multiple animations. Following are few demos will help you understanding this.
Example 1: Animate both height and width at same time.
This example is pretty straight forward. You can animate both height and width at same time by specifying it in animate function. For example: In below code we specified height and width value in animate function.
$("#animate").click(function() {
$("#content").animate(
{"height": "100px", "width": "250px"},
"slow", );
});
Example 2: Queuing the animations.
$("#animate").click(function() {
$("#content")
.animate({"height": "100px"}, 500)
.animate({"width": "250px"}, 500);
});
Queuing of Events
In above demo (Demo 6) we saw that when we queued up the events with multiple .animate() method call, the animation is actually queued up. i.e. it completes the first animation and then proceed with next. Let see an example were we use queue parameter to disable queuing. In following example we have set parameter queue to false. The code is exactly same as demo 6, only change we added is queue = false. Also note that queue parameter is added with second argument.
$("#animate").click(function() {
$("#content")
.animate({"height": "100px"}, {"queue": false, "duration": 500})
.animate({"width": "250px"}, 500);
});
相关推荐
在本主题中，我们将深入探讨"jQuery animate滑动收缩展开时间轴大事记发展历程"，了解这一功能如何随着时间推移而发展，并在实际项目中应用。 jQuery的animate()函数是其强大的动画工具之一，它允许开发者创建...
《jQuery Animate分页按钮详解及其应用》 在网页开发中，用户界面的交互性是提升用户体验的关键因素之一。jQuery Animate分页按钮是一种巧妙的交互设计，它通过动画效果增强了分页功能的视觉吸引力，使得用户在浏览...
本文将介绍如何使用原生JavaScript实现类似jQuery中的animate()方法的动画效果。在前端开发中，jQuery提供了一套非常方便的API来实现动画效果，但随着Web标准的发展和性能优化需求的提高，原生JavaScript的方法逐渐...
jquery animate图片模向滑动示例，适用于展示图片太多的页面，通过点击左右方向按钮，滑动展示更多的图片。功能简单，在IE、Firefox、谷歌浏览器 通过测试。详细示例图片。jquery animate() 用于创建自定义动画的...
《jQuery数字跳动插件AnimateNumber深度解析》 在当今的网页开发中，JavaScript库如jQuery极大地简化了前端开发工作，尤其是动态效果的实现。其中，“jQuery数字跳动插件AnimateNumber”是一款专为实现数字动态变化...
在这个示例中，“jquery animate图片模向滑动示例”正是利用了 `jQuery` 的 `animate` 方法来实现图片在水平方向上的滑动切换，为用户提供一种优雅的方式来浏览大量图片。 首先，`jQuery Animate` 是 `jQuery` 库中...
**jQuery Animate 图片无缝滑动** 在网页设计中，图片滑动效果是一种常见的动态展示方式，能够吸引用户的注意力并提升用户体验。`jQuery Animate`是jQuery库中的一个强大功能，用于创建平滑的动画效果。在这个场景...
"jQuery Animate图片无缝滑动"是一种常见的JavaScript网页特效，它常被用于创建轮播广告或图像展示区域，以实现图片的平滑过渡和无缝循环播放。下面将详细探讨这个特效的实现原理、关键技术和相关知识点。 首先，...
在本文中，我们将深入探讨如何使用jQuery的animate函数来实现一个简单的图片放大效果。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果等任务，使得网页开发更加便捷。在这个案例中，我们...
jQueryAnimate3d是一款专为网页设计师和开发者设计的高效、炫酷的JavaScript插件，它主要专注于实现鼠标滑过时的3D透视特效。这款插件基于jQuery库，利用其强大的DOM操作能力和事件处理功能，使得在网页上创建动态、...
《使用jQuery Animate实现横向图片滑动特效》 在网页设计中，图片滑动效果是一种常见且有效的展示手段，尤其适用于展示大量图片的场景。本文将深入探讨如何利用jQuery的animate函数来创建一个简单的横向图片滑动...
在本文中，我们将深入探讨如何使用jQuery的animate()方法实现图片的横向滑动效果。`jQuery` 是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果。`animate()`函数是jQuery中用于创建自定义动画的...
`animate()`是jQuery提供的一个核心函数，用于创建平滑的动画效果。在这个"免费jquery animate小用例"中，我们将深入探讨`animate()`的使用方法及其背后的原理。 `animate()`函数允许开发者自定义元素的各种CSS属性...
《jQuery animateNumber插件详解与应用》 在Web开发中，动态效果的运用极大地提升了用户体验，数字动画就是其中一种常见的视觉表现形式。今天我们将聚焦于一个名为“jquery-animateNumber”的插件，它允许开发者...
"jquery animate网站banner动画效果.zip" 是一个专门用于创建动态网站横幅（banner）的资源，它利用了jQuery库和CSS3的animate属性。这个压缩包包含了实现这一功能的代码示例，主要文件名为"jiaoben181830"。下面...
在本主题中，我们将深入探讨如何利用jQuery的animate方法实现一种卷轴打开的动画效果。这个效果通常用于模拟书籍翻页、画卷展开等场景，为用户界面增添动态视觉魅力。 首先，了解jQuery的核心功能之一——动画。...
在本主题中，我们将聚焦于如何使用jQuery的animate函数来实现一种动态效果：当鼠标悬停在分页标签按钮上时，这些按钮会滑动展开。这将增加交互性和视觉吸引力。 jQuery是一个轻量级、高性能的JavaScript库，提供了...
**jQuery的animate()方法详解** 在前端开发中，jQuery库为我们提供了一种强大的方式来实现元素的平滑动画效果，其中`animate()`方法是动画功能的核心。本篇文章将深入探讨如何使用`animate()`来使`div`或其他HTML...