注意：所有的动画方法都有回调函数,必须设置 style:'position:relative/absolute'show()和 hide()方法：注意： hide()方法执行时会先记录元素的 display 属性值。 当再执行 show()时就会将 display 还原 到 hide()前的状态。简单实用：两者用法相似，以 show()为例 $('element').show('slow');//还可以是 slow、 normal、 fast 分别是 600、 400、 200 毫秒。$('element').show(1000);//1000 毫秒。fadeIn()和 fadeOut 方法：这两个方法只改变元素的透明度。slideUp()和 slideDown()方法：这两个方法是改变元素的高度。animate()方法： $(selector).animate({params},duration,callback);//({参数},时间,回调 函数)#tt{ position:relative;//此属性要设为 relative 或 absolute. width:100px; height:100px; } <div id='tt'></div>

$('#tt').click(function(){ $(this).animate({left:'500px'},3000);//3 秒内向右移动到 500 像素。这点正 好相反'left'是往右,'right'是往左。'bottom'往上，'top'往下。 注意： 是移动到 500 像素而不是再移动 500 像素。 即若框本身右边已是 600 像素的位置，则反而会左移 100px。且再点击没有效果。 }) //属性还有'width'、'height'等。累加移动：$('#tt').click(function(){ $(this).animate({left:'+=500px'},3000);//3 秒内向右移动到 500 像素。若再次点击，会再往右移动 300px。'-='是向左移动。注意：假如 div 本身像素是 100px,我们设置+=50px,动画不会向左移，仍然会 向右增加 50px。这就是累加。})多动画执行： 同时执行： $('#tt').click(function(){ $(this).animate({left:'500px',height:'200px'},3000);//3 秒内同事 向右移到 500px，同时向上移动到 200px。 }) 按顺序执行(动画队列)： 注意：按顺序执行最简单的方法是拆开写： $(this).animate({left:'500px'},3000);$(this).animate({height:'200px'},3000);也可以用链式写：$(this).animate({left:'500px'},3000).animate({height:'200px'},3000);综合动画：

这些动画方法时刻以链式调用的。但是要注意 css('color','blue');如果也被 链式调用时，它会在第一时间被调用，而不会依循链式顺序。动画回调函数： css('color','blue');如果也被链式调用时，它会在第一时间被调用，而不 会依循链式顺序。这时我们可以用回调函数来实现，如我们希望在第二 个 animate 里改变 css 时，可以这样写： $(this).animate({left:'500px'},3000) .animate({height:'200px'},3000,function(){ $(this).css('color','blue');//这里就用了回调函数。 }) .animate({left:'700px'},3000);停止动画和判断是否处于动画状态：停止元素的动画： stop(clearQueue,gotoEnd);//stop(是否要清空未执行完的动画队列，是 否将正在执行的动画直接跳到末状态);用 true 和 false 表示 例：鼠标悬停动画，经常是鼠标刚悬停就离开了，这是悬停的动画还没 有完成，离开动画会被加入队列。这时我们需要用 stop： $('tt').hover(function(){ $(this).stop().animate({bottom:'100px'},2000);//结束当前正在进 行的动画，立即执行队列中的下个动画。 },function(){ $(this).stop().animate({bottom:'0px'},2000);}

) 注意：链式动画中，用 stop 只是立即执行链式的下个动画而起不到直 接执行 hover 的另一个函数的效果。 这时可以通过 stop(true);来达到想 要的效果。 $('tt').hover(function(){ $(this).stop(true).animate({bottom:'100px'},2000);//立即结束刚 执行的整个链式动画(animate().animate())，并执行新的动画。 },function(){ $(this).stop(true).animate({bottom:'0px'},2000);} )注意：stop(flase,true);//第二个 true 只能控制正在执行的动画。判断元素是否处于动画状态： 这个经常会用到 if(!$(element).is(':animate')){...};//如果动画没有执行。其它动画方法：toggle(): $(element).toggle();//用来切换元素的不可见和可见状态，相当于 show()和 hide()。slideToggle(): $(element).slideToggle();//以高度的缩减和恢复来对元素的可见和不 可见进行切换，相当于 slideUp 和 slideDown。