-
show([speed,[easing],[fn]])
: 显示隐藏的匹配元素。-
$('p').show('show')
-
1. 滑动
-
slideDown([speed],[easing],[fn])
: 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。-
$("p").slideDown('slow', function(){ alert("Animation Done."); });
-
-
slideUp([speed,[easing],[fn]])
: 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。-
$('p').slideUp('slow', function () { alert('Animation Done.') });
-
-
slideToggle([speed],[easing],[fn])
: 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。-
$('p').slideToggle('slow', function (){ alert('Animation Done.'); });
-
2. 淡入淡出
-
fadeIn([speed],[easing],[fn])
: 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。-
$('p').fadeIn(3000, function () { alert('Animation Done.') });
-
-
fadeOut([speed],[easing],[fn])
: 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。-
$('p').fadeOut(3000, function () { alert('Animation Done.') });
-
-
fadeTo([[speed],opacity,[easing],[fn]])
: 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。opacity:一个0至1之间表示透明度的数字。
-
$('p').fadeTo(3000, 0.5, function () { alert('Animation Done.'); });
-
-
fadeToggle([speed,[easing],[fn]])
: 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数。-
$('p').fadeToggle('slow', function () { alert('Animation Done'); });
-
3. 自定义
-
animate(params,[speed],[easing],[fn])
: 用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。-
注意:所有指定的属性必须用骆驼形式,比如用
marginLeft
代替margin-left
. -
每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。
-
$("p").animate({ width: "90%", height: "100%", fontSize: "10em", borderWidth: 10 }, 1000 );
-
-
stop([clearQueue],[jumpToEnd])
: 停止所有在指定元素上正在运行的动画。如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行-
$("p").animate({ width: "90%", height: "100%", fontSize: "10em", borderWidth: 10 }, 5000 ); // 在上个动画运行过程中stop。 $("p").stop();
-
-
delay(duration,[queueName])
: 设置一个延时来推迟执行队列中之后的项目。-
$("p").slideDown(1000).delay(3000).fadeOut(1000);
-
-
finish( [queue ] )
: 立即完成当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画。.finish()
方法和.stop(true, true)
很相似,.stop(true, true)
将清除动画队列,并且停在当前值。.finish()
会导致所有排队的动画的CSS属性跳转到他们的最终值。-
$("P").finish();
-
4. 设置
-
jQuery.fx.off
: 关闭页面上所有的动画。把这个属性设置为true可以立即关闭所有动画(所有效果会立即执行完毕)。-
jQuery.fx.off = true; // 以下动画立即执行完毕 $("p").animate({ width: "90%", height: "100%", fontSize: "10em", borderWidth: 10 }, 5000 );
-
-
jQuery.fx.interval
: 设置动画的显示帧速(默认值是 13 毫秒),降低这个值能够使动画在更快的浏览器中运行得更流畅。-
jQuery.fx.interval = 100;
-