jQuery 动画jQuery 包含一些方法，可以在隐藏、显示、更改样式属性以及淡入或淡出操作时为元素提供特殊效果。这些特殊效果方法在构建交互式用户界面时非常有用。
下表列出了用于向 DOM 元素添加特殊效果的 jQuery 方法。
jQuery 特殊效果方法描述animate()使用元素的样式属性执行自定义动画。queue()显示或操作要对指定元素执行的函数队列。stop()停止指定元素上当前正在运行的动画。fadeIn()通过淡入使其不透明来显示指定的元素。fadeOut()通过淡出使其透明来隐藏指定的元素。fadeTo()调整指定元素的不透明度。fadeToggle()通过动画化其不透明度来显示或隐藏指定的元素。hide()隐藏指定的元素。show()显示指定的元素。toggle()显示隐藏的元素或隐藏可见的元素。slideUp()通过向上滑动来隐藏指定的元素。slideDown()通过向下滑动来显示指定的元素。slideToggle()通过滑动动作显示或隐藏指定的元素。让我们看看一些重要的特殊效果方法。
jQuery animate() 方法jQuery animate() 方法使用元素的样式属性执行自定义动画。animate() 方法通过动画将现有样式属性更改为指定的属性。
指定一个选择器以获取要添加动画效果的元素的引用，然后使用包含样式属性、动画速度和其他选项的 JSON 对象调用 animate() 方法。
语法$('selector expression').animate({ stylePropertyName : 'value'},
duration,
easing,
callback);
$('selector expression').animate({ propertyName : 'value'},{ options });应用动画在以下示例中，我们通过动画更改元素的高度和宽度。
示例：jQuery animate() 方法 复制$('#myDiv').animate({
height: '200px',
width: '200px'
});
示例：设置持续时间 复制$('#myDiv').animate({
height: '200px',
width: '200px'
},
5000);
示例：应用缓动方法 复制$('#myDiv').animate({
height: '200px',
width: '200px'
},
5000, 'swing');
示例：指定回调函数 复制$('#myDiv').animate({
height: '200px',
width: '200px'
},
5000,
function () {
$('#msgDiv').append('Animation completed');
});
});
示例：指定选项 复制$('#myDiv').animate({
height: '200px',
width: '200px'
},
{ // options parameter
duration: 5000,
complete: function () {
$(this).animate({
height: '100px',
width: '100px'
}, 5000,
function () {
$('#msgDiv').text('Animation completed..');
});
},
start: function () {
$('#msgDiv').append('starting animation..');
}
});
语法$('selector expression').queue();示例：jQuery queue() 方法 复制$('#myDiv').toggle(500);
$('#myDiv').fadeOut(500);
$('#myDiv').fadeIn(500);
$('#myDiv').slideDown(500);
$('#msgDiv').append('Animation functions: ' + $('#myDiv').queue().length);
语法$('selector expression').fadeIn(speed, easing, callback);示例：jQuery fadeIn() 方法 复制$('#myDiv').fadeIn(5000, function () {
$('#msgDiv').append('fadeIn() completed.')
});
语法$('selector expression').fadeOut(speed, easing, callback);示例：jQuery fadeOut() 方法 复制$('#div1').fadeOut(5000, function () {
$('#msgDiv').append('fadeOut() completed.')
});
语法$('selector expression').hide(speed, easing, callback); $('selector expression').show(speed, easing, callback);示例：jQuery hide() 和 show() 方法 复制$('#div1').hide(500, function () {
$('#msgDiv').append('Red div is hidden.')
});
$('#div2').hide(500, function () {
$('#msgDiv').append('Yellow div is hidden.')
});
语法 $('selector expression').toggle(speed, easing, callback)示例：jQuery toggle() 方法 复制$('#myDiv').toggle(500, function () {
$('#msgDiv').append('fadeOut completed.')
});