jQuery |带示例的动画选择器

jQuery是一款广泛应用于web前端开发的JavaScript库，它的选择器特别强大，可以让开发者快速地找到需要的元素，使用动画选择器更可以让页面的交互更加生动形象。本文将为大家详细介绍jQuery动画选择器，并给出示例代码。

animte()方法

animate()方法可以实现元素的动画效果，它是jQuery中最基本的动画方法之一。

语法

$(selector).animate(styles,speed,easing,callback)

参数说明：

• selector (必需)：元素选择器，选中需要执行动画的元素。
• styles (必需)：CSS属性键值对，描述动画的效果。
• speed (可选)：动画执行时间，单位为毫秒，默认值为400。
• easing (可选)：执行动画的缓动函数，可选值包括："linear"、"swing"和"jswing"等。
• callback (可选)：动画执行完毕后的回调函数，当动画完成后立即触发（如果只提供一个参数，则会在动画开始前执行）。

示例代码：

$('button').click(function(){
  $('div').animate({left: '250px'}, "slow");
});

在上述代码中，当用户点击button元素时，div元素将以"slow"的速度从原位置向右移动250px。

fadeIn()方法

fadeIn()方法可以使元素渐渐出现，动效非常自然。

语法

$(selector).fadeIn(speed,easing,callback);

参数说明：

• selector (必需)：元素选择器，选中需要执行动画的元素。
• speed (可选)：动画执行时间，单位为毫秒，默认值为400。
• easing (可选)：执行动画的缓动函数，可选值包括："linear"、"swing"和"jswing"等。
• callback (可选)：动画执行完毕后的回调函数，当动画完成后立即触发（如果只提供一个参数，则会在动画开始前执行）。

示例代码：

$('button').click(function(){
  $('div').fadeIn();
});

在上述代码中，当用户点击button元素时，div元素将渐渐地从透明变得可见。

fadeOut()方法

fadeOut()方法可以使元素渐渐消失，与fadeIn()方法相反。

语法

$(selector).fadeOut(speed,easing,callback);

参数说明：

• selector (必需)：元素选择器，选中需要执行动画的元素。
• speed (可选)：动画执行时间，单位为毫秒，默认值为400。
• easing (可选)：执行动画的缓动函数，可选值包括："linear"、"swing"和"jswing"等。
• callback (可选)：动画执行完毕后的回调函数，当动画完成后立即触发（如果只提供一个参数，则会在动画开始前执行）。

示例代码：

$('button').click(function(){
  $('div').fadeOut();
});

在上述代码中，当用户点击button元素时，div元素将渐渐地从可见状态变为透明。

slideDown()方法

slideDown()方法可以使元素从上方滑动到当前位置，非常适合展示下拉菜单以及详情描述信息等。

语法

$(selector).slideDown(speed,easing,callback);

参数说明：

• selector (必需)：元素选择器，选中需要执行动画的元素。
• speed (可选)：动画执行时间，单位为毫秒，默认值为400。
• easing (可选)：执行动画的缓动函数，可选值包括："linear"、"swing"和"jswing"等。
• callback (可选)：动画执行完毕后的回调函数，当动画完成后立即触发（如果只提供一个参数，则会在动画开始前执行）。

示例代码：

$('button').click(function(){
  $('div').slideDown();
});

当用户点击button元素时，div元素将从上方滑动进入页面。

slideUp()方法

slideUp()方法可以使元素从当前位置滑动到上方消失。

语法

$(selector).slideUp(speed,easing,callback);

参数说明：

• selector (必需)：元素选择器，选中需要执行动画的元素。
• speed (可选)：动画执行时间，单位为毫秒，默认值为400。
• easing (可选)：执行动画的缓动函数，可选值包括："linear"、"swing"和"jswing"等。
• callback (可选)：动画执行完毕后的回调函数，当动画完成后立即触发（如果只提供一个参数，则会在动画开始前执行）。

示例代码：

$('button').click(function(){
  $('div').slideUp();
});

在上述代码中，当用户点击button元素时，div元素将从当前位置滑动到上方消失。

finish()方法

finish()方法用于停止正在执行的动画并立即完成。

语法

$(selector).finish();

参数说明：

• selector (必需)：元素选择器，选中需要执行动画的元素。

示例代码：

$('button').click(function(){
  $('div').animate({left: '250px'}, "slow").finish();
});

在上述代码中，当用户点击button元素时，div元素将以"slow"的速度从原位置向右移动250px，并且在动画执行到一半时被立即完成。

stop()方法

stop()方法用于停止正在执行的动画，可以选择是否立即完成。

语法

$(selector).stop(stopAll,goToEnd);

参数说明：

• selector (必需)：元素选择器，选中需要执行动画的元素。
• stopAll (可选)：是否停止并清除动画列队，默认值为false。如果为true，则正在排队的动画和当前正在执行的动画都将停止。
• goToEnd (可选)：是否立即完成动画，默认值为false。如果为true，则动画将立即完成到终点。

示例代码：

$('button').click(function(){
  $('div').animate({left: '250px'}, "slow");
});

$('button').click(function(){
  $('div').stop();
});

$('button').click(function(){
  $('div').stop(true);
});

$('button').click(function(){
  $('div').stop(true,true);
});

在第一个例子中，当用户点击button元素时，div元素将以"slow"的速度从原位置向右移动250px。在第二个例子中，当用户再次点击button元素时，div元素将停止动画，但保持当前的位置。在第三个例子中，当用户再次点击button元素时，div元素将停止并立即完成到终点。在第四个例子中，当用户再次点击button元素时，div元素将停止并立即完成到终点，并且正在排队的动画也将被清除。

总结

本文详细介绍了jQuery动画选择器，包括animate()、fadeIn()、fadeOut()、slideDown()、slideUp()、finish()和stop()方法。通过这些方法，开发者可以轻松地实现各种动画效果，从而使页面体验更加生动形象。