JQuery——动画效果

在jQuery中，有许多内置的动画效果函数，如.fadeIn(), .fadeOut(), .slideDown(), .slideUp(), .animate()等。

1. 淡入淡出效果

// 淡入
$("#div1").fadeIn();
 
// 淡出
$("#div1").fadeOut();

2. 滑入滑出效果

// 滑下
$("#div1").slideDown();
 
// 滑上
$("#div1").slideUp();

3. 自定义动画效果

// 自定义动画，这里是改变元素的宽度
$("#div1").animate({width:"200px"}, 2000);

4. 连续动画效果

// 连续动画，先淡出，然后淡入
$("#div1").fadeOut(1000).fadeIn(1000);

5. 动画队列

// 动画队列，先滑上，然后滑下
$("#div1").slideUp(1000).slideDown(1000);

6. 动画完成后的回调函数

// 动画完成后执行的函数
$("#div1").fadeIn(1000, function() {
  alert("动画完成！");
});

7. 动画的延迟

// 动画延迟执行
$("#div1").delay(1000).fadeIn(1000);

8. 停止动画

// 停止当前动画
$("#div1").stop();

9. 动画的顺序

// 使用动画队列，并设置每个动画的顺序
$("#div1").delay(1000).queue(function(next){
  $(this).fadeIn(1000);
  next();
}).delay(1000).queue(function(next){
  $(this).fadeOut(1000);
  next();
});

以上是jQuery动画效果的一些基本用法，实际使用时可以根据需要选择合适的动画效果函数。