posts - 264,&
comments - 100,&
trackbacks - 0
animate的意思是：使有生气；驱动；使栩栩如生地动作；赋予&以生命作为形容词：有生命的；活的；有生气的；生气勃勃的先看动画效果：animate()在jquery中作为一个方法，可用于创建动画效果以下是实例代码：
&!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"&
&title&jquery animate动画--柯乐义&/title&&base target="_blank" /&
&script type="text/javascript" src="/keleyi/pmedia/jquery-1.9.1.min.js"&&/script&
&script type="text/javascript"&
$(document).ready(function () {
$("button#bGo_kel"+"eyi_com").click(function () {
$("div#divAnimate_keleyi_com").animate({ top: "-280px", opacity: "0.5" }, "slow");
$("div#divAnimate_keleyi_com").animate({ fontSize: "5em" }, "slow");
$("button#bBack_keleyi_com").click(function () {
$("div#divAnimate_ke"+"leyi_com").animate({ top: "0px", opacity: "1" }, "slow");
$("div#divAnimate_keleyi_com").animate({ fontSize: "1em" }, "slow");
&div style="width:400margin:10border:1px solid green"&
&h2&animate动画效果演示&/h2&
&button id="bGo_keleyi_com"&开始动画&/button& &button id="bBack_keleyi_com"&回滚动画&/button& &a href="/a/bjac/5bace.htm" target="_blank"&原文&/a&&br /&&br /&
&div id="divAnimate_keleyi_com" style="background:height:110width:400position:color:White"&</&/div&
&div&&a href="/keleyi/phtml/jquery/1.htm"&jquery修改链接&/a& &a href="/keleyi/phtml/jquery/2.htm"&jquery弹出窗体&/a&&/div&
定义和用法animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。注释：使用 "+=" 或 "-=" 来创建相对动画（relative animations）。语法 1$(selector).animate(styles,speed,easing,callback)参数styles 必需。规定产生动画效果的 CSS 样式和值。可能的 CSS 样式值（提供实例）：backgroundPositionborderWdthborderBottomWidthborderLeftWidthborderRightWidthborderTopWidthborderSpacingmarginmarginBottommarginLeftmarginRightmarginTopoutlineWidthpaddingpaddingBottompaddingLeftpaddingRightpaddingTopheightwidthmaxHeightmaxWidthminHeightminWidthfontfontSizebottomleftrighttopletterSpacingwordSpacinglineHeighttextIndent注释：CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。speed 可选。规定动画的速度。默认是 "normal"。可能的值：毫秒 （比如 1500）"slow""normal""fast"easing 可选。规定在不同的动画点中设置动画速度的 easing 函数。内置的 easing 函数：swinglinear扩展插件中提供更多 easing 函数。allback 可选。animate 函数执行完之后，要执行的函数。语法 2$(selector).animate(styles,options)styles 必需。规定产生动画效果的 CSS 样式和值（同上）。options 可选。规定动画的额外选项。可能的值：speed - 设置动画的速度easing - 规定要使用的 easing 函数callback - 规定动画完成之后要执行的函数step - 规定动画的每一步完成之后要执行的函数queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数
本文转自柯乐义：
阅读(...) 评论()其他前端文档
.animate( properties [, duration ] [, easing ] [, complete ] )返回:
描述: 根据一组 CSS 属性，执行自定义动画。
添加的版本: .animate( properties [, duration ] [, easing ] [, complete ] )
properties
一个CSS属性和值的对象,动画将根据这组对象移动。
duration (默认: 400)
一个字符串或者数字决定动画将运行多久。（愚人码头注：默认值: "normal"， 三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如：1000)
easing (默认: swing)
一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"）
在动画完成时执行的函数。
添加的版本: .animate( properties, options )
properties
一个CSS属性和值的对象,动画将根据这组对象移动。
一组包含动画选项的值的集合。 支持的选项:
duration (default: 400)
一个字符串或者数字决定动画将运行多久。（愚人码头注：默认值: "normal"， 三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如：1000) ）
easing (default: swing)
一个字符串，表示过渡使用哪种缓动函数。（愚人码头注：jQuery自身提供"linear" 和 "swing"，其他效果可以使用插件）
queue (default: true)
一个布尔值，指示是否将动画放置在效果队列中。如果为false时，将立即开始动画。 从jQuery1.7开始，队列选项也可以接受一个字符串，在这种情况下，在动画被添加到由该字符串表示的队列中。当一个自定义的队列名称被使用，动画不会自动启动;你必须调用.dequeue("queuename")来启动它。
specialEasing
由此方法的第一个参数properties定义的一个或多个CSS属性，及其相应的缓动函数组成的键值对map。(
每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
animation,
remainingMs )
每一步动画完成后调用的一个函数，无论动画属性有多少，每个动画元素都执行单独的函数。 (version added: )
在动画完成时执行的函数。
animation,
jumpedToEnd )
在动画完成时执行的函数。 (他的Promise对象状态已完成). (version added: )
animation,
jumpedToEnd )
动画失败完成时执行的函数。(他的Promise对象状态未完成)。 (version added: )
animation,
jumpedToEnd )
在动画完成或未完成情况下停止时执行的函数。(他的Promise对象状态已完成或未完成)。 (version added: )
.animate()方法允许我们在任意的数值的CSS属性上创建动画。唯一必要的属性就是一组CSS属性键值对。这组属性和用于设置.css()方法的属性键值对类似，除了属性范围做了更多限制。
Animation Properties and Values(动画属性和值)
所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。（例如，width, height或者left可以执行动画，但是background-color不能，除非使用插件。）属性值的单位像素（px）,除非另有说明。单位em 和 %需要指定使用。
除了样式属性，
一些非样式的属性，如scrollTop 和 scrollLeft，以及自定义属性，也可应用于动画。
CSS简写属性（例如font, background, border）没有得到充分的支持。例如，
如果你想边框宽度做动画呈现，至少边框样式和边框宽度必须预先设定不为"auto" 。或者，如果你想字体大小做动画，
你可以使用fontSize的或相当于CSS的 'font-size' ，而不是简单的'font'。
除了定义数值，每个属性能使用'show', 'hide', 和 'toggle'。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏。为了使用jQuery内置的切换状态跟踪，'toggle'关键字必须在动画开始前给定属性值。（愚人码头注：jquery中有两个.toggle()方法，一个是显示或隐藏匹配元素。另一个是绑定两个或多个处理程序绑定到匹配的元素，用来执行在交替的点击。哪一个被调用取决于传递的参数的设置。所以这里'toggle'关键字必须在动画开始前给定属性值，以确认调用哪个'toggle'方法。）
动画属性也可以是一个相对值。如果提供一个以+= 或 -=开始的值，那么目标值就是以这个属性的当前值加上或者减去给定的数字来计算的。
不同于动画的简便方法，比如.slideDown() 和 .fadeIn(),.animate()方法不会影响隐藏元素的可见性部分的效果。例如，给定$('someElement').hide().animate({height:'20px'}, 500)，动画将执行，但该元素将保持隐藏。
Duration（持续时间）
持续时间是以毫秒为单位的；值越大表示动画执行的越慢，不是越快。还可以提供'fast' 和 'slow'字符串，分别表示持续时间为200 和 600毫秒。
callback Function（回调函数）
如果提供回调函数，start, step, progress, complete, done, fail, and always回调 将在每个元素上执行一次; this会指向正在执行动画的DOM元素。如果集合中没有任何元素，没有回调将被调用。 如果多个元素执行动画，回调将在每个匹配的元素上执行一次，不是作为整个动画执行一次。
这是设置为DOM元素进行动画。
如果没有任何元素，在集合，没有回调被调用。
如果多个元素的动画，
回调执行每一次匹配的元素，
没有一次为动画作为一个整体。
使用方法来获得一个promise，您可以附加回调到任意元素数量的动画集合上，包括零元素，（当resolve时）来触发一次。
如果提供complete回调函数将在动画完成后被执行一次。这对于按顺序执行一系列不同动画时，特别有用。这个回调函数不设置任何参数，但是this会被传递到正在执行动画的DOM元素上，如果多个元素一起做动画效果，值得注意的是这个回调函数在每个匹配元素上执行一次，不是这个动画作为一个整体。
Basic Usage（基本用法）
我们可以为任何元素做动画，比如这样的一个简单图片：
id="clickme"&
Click here& id="book" src="book.png" alt="" width="100" height="123"
style="position: left: 10" /&
同时对透明度，左偏移值和高度应用动画：
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
图1-指定的动画效果插图
注意我们这里给定了toggle作为height属性的目标值。由于这个图片开始是可见的，这个动画将收缩高度至0隐藏这个图片。第二次点击的时候将相反的转变：
图2-指定的动画效果插图
这个图片的opacity已经是其目标值了，所以这个属性在第二次点击的时候不会有动画效果。由于我们给定了left目标值作为相对值，在第二次动画中图片将向右移动得更远。
如果元素的定位属性是静态的，即 position样式属性是static默认值，那么他们的定位属性（top, right, bottom, left)没有明显的效果。
注意: 项目扩展了.animate()方法，允许一些非数值的样式，比如颜色，应用动画。该项目还包括通过CSS classes来指定动画的机制而不是单独的属性。
如果试图将元素高度或宽度动画至 0px，元素的内容是可见的，可能在动画中溢出。通过固定原始元素的尺寸，隐藏内容解决。这样可以确保动画平稳运行。一个 可以用来自动修复您的主要元素的尺寸，而无需手动设置。
Step Function
第二个版本的.animate()提供了一个step选项- 每步动画执行后调用的回调函数。启用自定义动画类型或改变正在执行的动画，此功能是非常有用。它接受两个参数（now 和 fx），this是当前正在执行动画的DOM元素集合。
每一步动画属性的数字值
fx: jQuery.fx 原型对象的一个引用，其中包含了多项属性，比如elem 表示前正在执行动画的元素，start和end分别为动画属性的第一个和最后一个的值，prop为进行中的动画属性。
需要注意的是step函数被每个动画元素的每个动画属性调用。例如，给定两个列表项，step函数会被激发四次：
$('li').animate({
opacity: .5,
height: '50%'},{
step: function(now, fx) {
var data = fx.elem.id + ' ' + fx.prop + ': ' +
$('body').append('&div&' + data + '&/div&');
Easing（缓动）
.animate()还有一个参数是一个字符串命名的使用缓动函数。一个缓动函数指定用于动画进行中在不同点位的速度。 在jQuery库中是默认的时调用 swing。在一个恒定的速度进行动画，请调用 linear. 更多的缓动函数要使用的插件，最显着的是（译者注：或插件）。
Per-property Easing
从jQuery 1.4 版本开始，我们能设置per-property 缓存函数访问一个单独的.animate()。在.animate()的第一个版本中，每个属性能获取一个数组作为他的值：数组的第一个成员是CSS属性，第二成员缓冲函数。如果为某个属性指定的缓冲函数尚未被定义，那么将会使用.animate()
方法的 easing 参数来代替。如果 easing 参数也未被定义，那么将会使用默认的缓冲函数 swing。
例如, 我们可以同时的使用swing缓冲函数来做width 和 height动画，并且用linear缓冲函数来做opacity动画：
$('#clickme').click(function() {
$('#book').animate({
width: ['toggle', 'swing'],
height: ['toggle', 'swing'],
opacity: 'toggle'
}, 5000, 'linear', function() {
$(this).after('&div&Animation complete.&/div&');
在.animate()的第二个版本中，选项对象能包含specialEasing属性，该属性本身是一组CSS属性与相应的缓冲函数。例如，我们可以同时的使用linear缓冲函数来做width动画，并且用easeOutBounce缓冲函数来做height动画：
$('#clickme').click(function() {
$('#book').animate({
width: 'toggle',
height: 'toggle'
duration: 5000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
complete: function() {
$(this).after('&div&Animation complete.&/div&');
如前所述,easeOutBounce 函数是一个极其必要的插件。
Additional Notes:（其他注意事项：）
所有的jQuery效果，包括.animate(),能使用jQuery.fx.off = true来全局性关闭。更多信息请查看.
Example: 点击按钮，根据指定的一系列属性，在 div 上应用动画。
&!DOCTYPE html&&&
& {background-color:#bca;width:100border:1}&
src="/jquery-latest.js"&&&&
id="go"&& Run&
id="block"&Hello!&&
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );});& &&
Example: 对 div 应用动画，在 left 属性上使用相对值。执行动画多次，查看相对值的累加效果。
&!DOCTYPE html&&&
background-color:#abc;
margin:5}&
src="/jquery-latest.js"&&&&
id="left"&&&
id="right"&&& class="block"&& &$("#right").click(function(){
$(".block").animate({"left": "+=50px"}, "slow");}); $("#left").click(function(){
$(".block").animate({"left": "-=50px"}, "slow");}); & &&
Example: 第一个按钮要执行的动画中，使用了 queue: false 选项，该动画使元素的宽度扩大到了总宽 90%,并且 文字大小也变大了。一旦字体大小改变完了，边框的动画就会开始。 第二个按钮要执行的动画中，包含了一系列动画，当前一个动画完成时，后一个动画就会开始。
&!DOCTYPE html&&&
background-color:#bca;
height:1.1
text-align:
font-size:14} {
font-size:14}&
src="/jquery-latest.js"&&&&
id="go1"&& Animate Block1& id="go2"&& Animate Block2& id="go3"&& Animate Both&
id="go4"&& Reset& id="block1"&Block1& id="block2"&Block2&& $( "#go1" ).click(function(){
$( "#block1" ).animate( { width: "90%" }, { queue: false, duration: 3000 })
.animate({ fontSize: "24px" }, 1500 )
.animate({ borderRightWidth: "15px" }, 1500 );}); $( "#go2" ).click(function(){
$( "#block2" ).animate({ width: "90%" }, 1000 )
.animate({ fontSize: "24px" }, 1000 )
.animate({ borderLeftWidth: "15px" }, 1000 );}); $( "#go3" ).click(function(){
$( "#go1" ).add( "#go2" ).click();}); $( "#go4" ).click(function(){
$( "div" ).css({ width: "", fontSize: "", borderWidth: "" });}); & &&
Example: 对第一个 div 的 left 属性应用动画，在动画执行的过程中，在 step 函数中改变其余 div 的 left 属性。
&!DOCTYPE html&&&
background-color: #abc;
height: 40
margin: 5}&
src="/jquery-latest.js"&&&& & id="go"&Run >>&& class="block"&&
class="block"&& class="block"&&
class="block"&& class="block"&&
class="block"&& &$( "#go" ).click(function(){
$( ".block:first" ).animate({
duration: 1000,
step: function( now, fx ){
$( ".block:gt(0)" ).css( "left", now );
});});& &&
Example: 对所有段落的高和透明度使用 toggle 动画，用时 600 毫秒。
$( "p" ).animate({
height: "toggle", opacity: "toggle"}, "slow" );
Example: 对所有段落应用动画，使其 left 属性变为 50，透明度变为 1（即，不透明，可见），用时 500 毫秒。
$( "p" ).animate({
left: 50, opacity: 1}, 500 );
Example: Animate the left and opacity style properti run the animation outside the queue, so that it will automatically start without waiting for its turn.
$( "p" ).animate({
left: "50px", opacity: 1}, { duration: 500, queue: false });
Example: 一个使用 'easing' 缓冲函数的例子，只要当你提供的插件中包含 easing 函数即可。注意，以下代码只能在处于隐藏的元素上才会看出效果。
$( "p" ).animate({
opacity: "show"}, "slow", "easein" );
Example: 对所有段落的高和透明度使用 toggle 动画，用时 600 毫秒。
$( "p" ).animate({
height: "toggle", opacity: "toggle"}, { duration: "slow" });
Example: 一个使用 'easing' 缓冲函数的例子，只要当你提供的插件中包含 easing 函数即可。
$( "p" ).animate({
opacity: "show"}, { duration: "slow", easing: "easein" });
Example: 一个使用回调函数的例子。第一个参数是一个 CSS 属性数组，第二个参数表示动画耗时 1000 毫秒，第三个参数说明使用的是 easing 缓冲效果, 第四个参数是一个匿名的回调函数。
$( "p" ).animate({
height: 200, width: 400, opacity: 0.5}, 1000, "linear", function() {
alert("all done");});如何让jQuery锚点链接只在指定id区域内的a标签中生效？_百度知道
如何让jQuery锚点链接只在指定id区域内的a标签中生效？
1000);&上面的代码中是判断整个页面a标签的锚点;$(function(){
$(&#39;javascript&quot.hostname == this, &#39.replace(&#47.slice(1) + &#39.top-55;
$target = $&#47.length && $target || $(&#39.replace(&#47;&#47.pathname。&})&lt，现在想将两者区分开了.hash););]&#39;
$(&#39，刻字机弄了半天却搞不定只有求助了，因为两者都用到了锚点链接.click(function() {
if ( + this，都是以#号开头;&#39;^&#92.offset();&#47;，这样不会影响其他.hostname) {
var $target = $() && location,area[href*=#]&#39.pathname之前添加了一个jQuery锚点链接平滑滚动的功能，现在希望只有指定id的div中点击锚点链接才能生效,body&#39;[name=&#39, &#39;);^&#92;script&gt: targetOffset
}，可是却和后来添加的jQuery的tab选项卡有冲突;script type=&
if ($text&#47;) ==a[href*=#];&#39;);&#47;&#47.hash.length) {
var targetOffset = $target.animate({
return false，希望能够让jQuery锚点链接平滑滚动的代码只在指定ID的div区域中生效
main-wrap&quot.getElementById(&获取指定id在网上搜了很久，但无法使代码只在这个id范围内生效，结果只知道用)
提问者采纳
||&&&nbsp.;$(&&&+&&$&&&&&&=&scrollT&&&&});&&&&&&targetOffset&=&&&#39;&nbsp:&var&&&{&&&&&&&&{&}.&&&&&&&&&=&+&&&&&&);&&在id是main-wrap的元素中查找a或&&1000);&nbsp?\//;&&&nbsp.hash);&nbsp,&nbsp,area[href*=#]&#39;&&&&)&&&&nbsp,&nbsp.slice(1)&&var&(&&&&nbsp.replace(&targetOffset&&$target&&&&$if&&nbsp.top&&&&&{&&&&&&&&&&&))&&{&&#main-wrap&quot.replace(&&&&&nbsp.length)&&&//&&&&&#39;&$(&&&&&&$target&[name=&#39;&]&#39;a[href*=#];}&);&&nbsp，并且他们的href包括#&&#39;&nbsp.length&nbsp.offset();&&&&&nbsp.animate({&&&&&&reg&if&&&&);return&nbsp,body&#39;&&&&#39.find(&#39;var&&&&&&&55;$(&#39;&&&&),&nbsp.click(function()&-&&&nbsp./^\;==&&#39;&&&&&&&&nbsp.&&&&nbsp$(function()&&=&$(&#39;&&&$target&&&&&&}&&&&&($target
万分感谢，折腾了两小时的问题终于找到答案了，之前我自己想先用if(document.getElementById(&main-wrap&)!=undefined){}判断是否存在，然后将代码写在里面，结果跟原来没什么两样，依然是整个页面的都生效，无法只在指定id范围内生效，看到你的回答终于清楚多了。总之谢谢你了，问题解决了，出门买早餐去0.0
提问者评价
真的很谢谢你，吃早餐了先0.0
其他类似问题
为您推荐：
山中问答的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁使用jquery实现的动画片简单实例 - jQuery当前位置:& &&&使用jquery实现的动画片简单实例使用jquery实现的动画片简单实例&&网友分享于：&&浏览：0次使用jquery实现的动画简单实例使用jquery实现的动画简单实例:下面介绍一段利用jquery实现的动画效果，非常的简单，当然在实际项目中不可能有这么简单的应用，不过可供初学者参考一下大致的实现原理，代码实例如下:
&!DOCTYPE html&
&meta charset="utf-8"&
&meta name="author" content="/" /&
&title&蚂蚁部落&/title&
&style type="text/css"&
position:relative;
width:<span style="background-color: #f5f5f5; color: #px;
height:<span style="background-color: #f5f5f5; color: #px;
border:1px solid #0050d0;
background:#96e555;
cursor:pointer;
&script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"&&/script&
&script type="text/javascript"&
$(function(){
$("#thediv").css("optcity","0.5");
$("#thediv").click(function(){
$(this).animate({
left:"400px",
height:"200px",
opacity:"1"
.animate({
top:"200px",
width:"200px"
.fadeOut("slow");
&div id="thediv"&&/div&
以上代码实现了简单的动画效果，代码比较简单，这里就不多介绍了，可以参阅相关阅读。相关阅读:1.css()函数可以参阅一章节。2.click事件可以参阅一章节。3.animate()函数可以参阅一章节。&&4.fadeOut()函数可以参阅一章节。&5.链式调用可以参阅一章节。&
原文地址是:/forum.php?mod=viewthread&tid=11836
更多内容可以参阅:/jquery/
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 1234567891011 Copyright & &&版权所有<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&