备注：方法的参数类型，见 jQuery特效-方法参数类型
.animate()
执行一段设置了CSS属性的定制的动画
.animate( properties [, duration ] [, easing ] [, complete ] )
.animate( properties, options )
.animate()方法允许我们在任何数值的CSS属性上创建动画效果。唯一的需要(required)的参数是CSS属性的简单对象（译者注：方法中的properties参数）。这个对象和能被传入到.css()方法的对象是一样的，除了该属性的范围更加的严格。
Note:和缩写(shorthand)动画方法不同的，如.slideDown()和.fadeIn(),.animate()方法不会将让隐藏的元素显示作为特效的一部分。如，给出$('someElement').hide().animate({height:'20px'}, 500)，这个动画会执行，但是元素会保持隐藏。
Note：jQuery UI项目扩展了.animate()方法通过允许使用一些非数值的样式如colors被使用动画。这个项目允许包含通过CSS classes指定动画，而不是单独的属性值。
Note：如果尝试着在由于溢出导致的元素内容可见的地方，animate一个元素的height或者width为0px，jQuery也许会裁剪（clip）这个移除的地方，在执行动画的时候。通过固定被隐藏的原始元素大小，然而，这样可能会保证动画平稳的执行。clearfix 能够被使用，自动的固定你的主要元素的大小，不需要手动的设置。
Per-property Easing
jQuery1.4中，你可以简单的调用.animate()来设置每一个属性（per-property）的easing函数。animate方法的第一种形式，每个属性都可以拿一个数组做为它的值：数组的第一个成员是CSS属性，第二个成员是一个easing函数。如果一个per-property easing函数没有为一个特殊的属性定义，它会使用.animate(）方法的可选择easing参数。如果该easing参数没有被定义，会使用默认的swing函数。
如，同时改变width和height 使用swing easing函数，透明度使用linear easing函数：
$('#clickme').click(function() {
$('#book').animate({
width: ['toggle', 'swing'],
height: ['toggle', 'swing'],
opacity: 'toggle'
}, 5000, 'linear', function() {
$(this).after('<div>Animation complete.</div>');
});
});$('#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函数需要提供插件。
<script>
/* 在一个动画中使用多个类型的单位*/
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
</script><script>
$("#right").click(function(){//译者注：animate方法中必不可少的参数是普通对象，详细的内容可以查看jQuery特效的使用参数类型和jQuery使用类型两篇内容，如果不了解的情况下。
$(".block").animate({"left": "+=50px"}, "slow");
});
$("#left").click(function(){
$(".block").animate({"left": "-=50px"}, "slow");
});
</script><script>
$( "#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: "" });
});
</script><script>
$( "#go" ).click(function(){
$( ".block:first" ).animate({
left: 100
}, {
duration: 1000,
step: function( now, fx ){
$( ".block:gt(0)" ).css( "left", now );
}
});
});
</script>$( "p" ).animate({
height: "toggle", opacity: "toggle"
}, "slow" );$( "p" ).animate({
left: 50, opacity: 1
}, 500 );$( "p" ).animate({
left: "50px", opacity: 1
}, { duration: 500, queue: false });$( "p" ).animate({
opacity: "show"
}, "slow", "easein" );$( "p" ).animate({
height: "toggle", opacity: "toggle"
}, { duration: "slow" });$( "p" ).animate({
opacity: "show"
}, { duration: "slow", easing: "easein" });$( "p" ).animate({
height: 200, width: 400, opacity: 0.5
}, 1000, "linear", function() {
alert("all done");
});.delay()
设置函数队列中随后的函数的延迟执行的时间。
.delay( duration [, queueName ] )
queueName
类型是字符串。
包含队列名字的字符串，默认是fx，标准的效果队列。
在jQuery1.4版本中被添加，.delay()方法允许我们延迟在队列中位于其后的函数的执行。它可以被和标准的效果队列或者定制的队列一起使用。只有在队列中的后面的事件才会被延迟；如，这不会延迟没有参数的形式.show()或者.hide()，这些方法不使用效果队列。
使用标准的效果队列，我们能够，如，在<div id="foo">上，在.slideUp()和.fadeIn()之间设置88毫秒的延迟。
$('#foo').slideUp(300).delay(800).fadeIn(400);.delay()方法最适用于队列的jQuery效果间的延迟。
因为它是受限制的，如，它不提供一种取消延迟的方式。因此，.delay()不是Javascript本地的setTimeout函数的替代，setTimeout也许更加适用于这样的例子（取消延迟）。
<script>
$("button").click(function() {
$("div.first").slideUp(300).delay(800).fadeIn(400);
$("div.second").slideUp(300).fadeIn(400);
});
</script>.stop()
在匹配的元素上停止当前执行的动画。
.stop( [clearQueue ] [, jumpToEnd ] )
.stop( [queue ] [, clearQueue ] [, jumpToEnd ] )
clearQueue
类型是布尔类型。
指示是否移除队列动画的布尔值。默认是false。
jumpToEnd
类型是布尔类型。
指示是否立刻完成当前的动画的布尔值。默认是false。
queue
类型是字符串。
停止的动画所在的函数队列的名字。
当.stop()在一个元素上调用的时候，当前正在执行的动画会立刻停止。如果，比如，一个元素正在被.slideUp()隐藏，当.stop(）调用的时候，该元素现在会仍然显示，但是会是它以前高度的一部分。回调函数不会被调用。
如果不止一个动画方法在相同的元素上调用，后面的动画会为该元素被放置在效果队列中。这些动画不会开始直到第一个执行完成。当.stop()被调用，下一个在队列中的动画开始立刻执行。如果clearQueue参数被提供了一个true的值，然后在队列中的其他函数会被移除，并且不会再运行。
如果jumpToEnd参数被提供一个值为true，当前的动画会停止，但是该元素会立刻为每一个CSS属性显示它的目标值。在上面的.slideUp()例子中，该元素会立刻隐藏。回调函数然后会立刻被调用，如果提供。
jQuery1.7，如果第一个参数被作为字符串提供，在队列中只有被该字符串所代表的的动画会被停止。
当我们需要在mouseenter和mouseleave上动画该元素，.stop()方法的用处会很明显：
<div id="hoverme">
Hover me
<img id="hoverme" src="book.png" alt="" width="100" height="123" />
</div>$('#hoverme-stop-2').hover(function() {
$(this).find('img').stop(true, true).fadeOut();
}, function() {
$(this).find('img').stop(true, true).fadeIn();
});jQuery1.7中，使用.stop()过早的停止一个toggled动画会触发jQuery内部的效果追踪。在以前的版本中，在一个toggled的动画被执行完成之前，调用.stop()方法会导致该动画丢失对它状态的联系（如果jumpToEnd值为false）。任何随后的动画会以一种新的中途（half-way）的状态开始，有时会导致元素消失。希望看到这个新的行为，看第二个例子。
<script>
/*开始动画*/
$("#go").click(function(){
$(".block").animate({left: '+=100px'}, 2000);
});
/* 当按钮点击的时候，停止动画 */
$("#stop").click(function(){
$(".block").stop();
});
/* 在相反的方向开始动画 */
$("#back").click(function(){
$(".block").animate({left: '-=100px'}, 2000);
});
</script><script>
var $block = $('.block');
/* 切换滑动动画的动画*/
$('#toggle').on('click', function() {
$block.stop().slideToggle(1000);
});
</script>jQuery.fx.interval
动画执行的比率（毫秒单位）。
这个属性能被用来操作动画执行的每秒的帧数。默认的是13毫秒。在更快的浏览器中（如Chrome），让比这个更小一点的数字会让动画执行的更平和一点，但是这样做也会存在性能和CPU的影响。
当jQuery使用了一个全局的interval之后，动画不能再被运行或者动画应该为这个属性的改变来停止，让其产生效果。
Note：jQuery.fx.interval 当前在支持requestAnimationFrame属性的浏览器中没有效果，如Google Chrome 11。这种行为可能会在未来的版本中发生变化。
<script>
jQuery.fx.interval = 100;
$("input").click(function(){
$("div").toggle( 3000 );
});
</script>
jQuery.fx.off
全局范围内停止所有动画。
当这个属性被设置为了true，所有的动画方法会立刻的设置元素到它们的最终状态，当调用的时候，而不是显示一个特效。这也许是一些可取的原因：
jQuery被使用在了低资源的设备上。
用户遇到了动画的可访问的问题。
动画可以被设置回来了，通过简单的设置属性的值为false。
<script>
var toggleFx = function() {
$.fx.off = !$.fx.off;
};
toggleFx();
$("button").click(toggleFx)
$("input").click(function(){
$("div").toggle("slow");
});
</script>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
