jQuery动画效果完整指南：方法、队列与自定义实现

jQuery基础动画方法：hide与show

在jQuery库中，最基础的动画操作通常涉及hide()和show()这两个方法。

调用$(element).hide()的效果等同于直接设置CSS属性为display: none，即element.css("display","none")。

通过为hide(time)和show(time)指定时间参数，可以实现元素的渐隐或渐现效果。这些方法会同时改变元素的高度、宽度以及不透明度，从而产生平滑的过渡动画。

淡入淡出与滑动效果

另一组常用的方法是fadeIn()和fadeOut()。与hide和show不同，这组方法在动画执行过程中不会改变元素占据的文档流高度，仅调整不透明度。

示例代码展示了toggle方法结合fadeIn/fadeOut的使用：$("#panel h5.head").toggle(function(){ $(this).addClass("highlight"); $(this).next().fadeOut(1000); },function(){ $(this).removeClass("highlight"); $(this).next("div .content").fadeIn(1000); });此外，还有slideUp和slideDown方法，它们专门用于改变元素的高度。

动画队列机制与执行顺序

jQuery提供了丰富的动画方法，理解其概括分类有助于选择合适的工具。

掌握动画队列机制是避免动画冲突和错乱的关键。

针对一组元素应用动画效果时，行为取决于调用方式。

如果在单个animate()方法中同时应用多个CSS属性，这些属性的动画变化是同步发生的。

若采用链式写法依次调用多个动画方法，动画将按照代码书写的顺序依次执行。

对于多组元素应用动画效果时，逻辑略有不同。

默认情况下，多组元素上的动画会同时开始执行。

如果通过回调函数的形式应用动画，动画将严格按照回调的执行顺序依次进行。

需要注意的是，非动画方法（如css()）可能会插入动画队列中执行。为了确保这些方法按预定顺序执行，应将其包裹在动画方法的回调函数中。

animate方法详解与stop控制

以下是一个使用animate方法的示例，展示如何移动元素并添加边框。

$(“#id”).animat({left:”400px”,top:”300px”},3000,function(){


     $(this).css(“border”,”1px solid blue”);


});

若需停止正在进行的动画，应在调用animate()之前插入stop()方法。

例如：$(“#id”).stop().animate()。这里需要特别注意stop()方法接收的两个参数，它们分别控制是否清空当前队列和是否立即完成当前动画。

判断元素是否正处于动画状态，可以使用特定方法进行检查。

$(element).is(“:animated”);

内置动画方法列表与时长设置

jQuery能够轻松为页面元素添加动态效果，既可以使用内置效果，也能自定义实现。

以下是jQuery提供的一些内置动画方法列表。

• $.fn.show：用于显示选中的元素。
• $.fn.hide：用于隐藏选中的元素。
• $.fn.fadeIn：实现淡入效果。
• $.fn.fadeOut：实现淡出效果。
• $.fn.slideDown：通过垂直滑动的方式显示元素。
• $.fn.slideUp：通过垂直滑动的方式隐藏元素。
• $.fn.slideToggle：在显示和隐藏滑动之间进行交互切换。

下面是一个简单的使用示例，演示如何快速显示元素。

$('h1').show();

设置动画效果的持续时间是调整动画节奏的重要手段。

对于$.fn.show和$.fn.hide，默认时长为0；其他效果的默认时长通常为400毫秒。用户也可以自定义设置时长。

$('h1').fadeIn(300);   // 300 毫秒
$('h1').fadeOut('slow'); // slow 是内建的速度常量

jQuery默认的速度常量定义在jQuery.fx.speeds对象中。

speeds: {
  slow: 600,
  fast: 200,
  // Default speed
  _default: 400
}

开发者可以扩展该对象，添加常用的自定义速度值。

jQuery.fx.speeds.blazing = 100;
jQuery.fx.speeds.turtle = 2000;

回调函数与自定义动画实现

回调函数允许在动画结束后执行特定代码。

若希望在动画效果完全结束后执行后续代码，可以为动画方法传入一个回调函数。

$('div.old').fadeOut(300, function() {
 $(this).remove();
});

如果选择器未匹配到任何元素，回调函数将不会执行。因此，在执行回调前进行存在性判断是必要的最佳实践。

var $thing = $('#nonexistent');

var cb = function() {
  console.log('done!');
};

if ($thing.length) {
  $thing.fadeIn(300, cb);
} else {
  cb();
}

除了内置方法，还可以创建自定义动画。

jQuery的$.fn.animate方法可用于扩展自定义动画，主要通过设置元素的CSS属性实现。在设置CSS属性时，既可以使用绝对值，也可以使用相对值。

$('div.funtimes').animate(
  {
    left : "+=50",
    opacity : 0.25
  },
  300, // 时长
  function() { console.log('done!'); // 回调函数
});

动画风格与执行控制

然而，使用$.fn.animate创建自定义动画时，默认无法改变元素的颜色。如需实现颜色动画，必须依赖额外的颜色插件。

jQuery内置的动画风格主要有两种：swing（默认，缓动）和linear（线性）。

$('div.funtimes').animate(
  {
    left : [ "+=50", "swing" ],
    opacity : [ 0.25, "linear" ]
  },
  300
);

jQuery提供了多种控制动画执行的方法。

以下是用于控制动画执行的具体方法列表。

$.fn.stop：用于停止当前正在执行的动画。

$.fn.delay：使动画暂停指定的时间长度。

示例：$('h1').show(300).delay(1000).hide(300); 展示了显示、延迟和隐藏的组合使用。

jQuery.fx.off属性可用于关闭所有动画的过渡效果，其效果等同于将动画时长设置为0。