jQuery 效果 - 动画 —— W3school 详解 简单易懂

在jQuery中，有许多种方法可以用来创建动画效果。这里我们将详细介绍其中的几种方法。

1. 显示和隐藏元素

jQuery的show()和hide()方法可以用来显示和隐藏元素。

$("#hide").click(function(){
  $("p").hide();
});
 
$("#show").click(function(){
  $("p").show();
});

2. 淡入和淡出效果

fadeIn()和fadeOut()方法可以用来实现元素的淡入和淡出效果。

$("#fadein").click(function(){
  $("p").fadeIn();
});
 
$("#fadeout").click(function(){
  $("p").fadeOut();
});

3. 淡出-淡入效果

fadeToggle()方法可以在fadeIn()和fadeOut()之间切换。

$("#fade").click(function(){
  $("p").fadeToggle();
});

4. 滑入和滑出效果

slideDown()和slideUp()方法可以用来实现元素的滑入和滑出效果。

$("#slidedown").click(function(){
  $("p").slideDown();
});
 
$("#slideup").click(function(){
  $("p").slideUp();
});

5. 滑动效果

slideToggle()方法可以在slideDown()和slideUp()之间切换。

$("#slide").click(function(){
  $("p").slideToggle();
});

6. 动画方法

animate()方法可以创建自定义的动画。

$("#animate").click(function(){
  $("p").animate({
    left:'250px',
    opacity:'0.5',
    height:'+=150px',
    width:'+=150px'
  });
});

7. 停止动画

stop()方法可以用来停止当前的动画。

$("#stop").click(function(){
  $("p").stop();
});

8. 链式动画

通过链式操作，可以实现多个动画顺序播放。

$("#chain").click(function(){
  $("p").animate({left:'100px'}).animate({fontSize:'3em'});
});

9. 回调函数

动画完成后执行的函数可以作为回调函数。

$("#callback").click(function(){
  $("p").animate({left:'100px'}, function(){
    alert('动画完成！');
  });
});

以上就是jQuery动画效果的一些基本用法，实际使用时可以根据具体需求选择合适的动画方法。