JQuery常用简单动画操作方法回顾与总结

下面就是关于“JQuery常用简单动画操作方法回顾与总结”的详细攻略。

一、JQuery的animate()方法

animate()方法是JQuery中最常用的动画方法之一，可以通过它来实现元素的动态变化。这个方法可以改变元素的CSS属性值，从而实现动画效果。

1. animate()方法的语法

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

参数说明：
- styles：必填，它是一个对象，其中包含了需要改变CSS属性的键值对，如 {left:'250px'} 表示把左侧距离设置为250像素
- speed: 必填，规定完成动画的时间，单位为毫秒。
- easing：可选，规定在动画开始或者结束时，动画效果的速度变化。常用的值有 "swing"（默认效果）和 "linear"（相同速度的运动）。还可以使用回调函数自定义动画效果。
- callback: 可选, 动画结束后的回调函数，在动画完成时执行。

2. animate()方法的示例

下面通过一个具体的示例来说明animate()方法的应用，我们可以通过按钮点击来控制一张图片的位置移动：

HTML代码：

<img id="animate-img" src="https://via.placeholder.com/150"/>
<button id="animate-btn">Move</button>

JS代码：

$(document).ready(function(){
  $("#animate-btn").click(function(){
    $("#animate-img").animate({left: '250px'}, 2000);
  });
});

这个代码实现的效果是，当我们点击按钮时，蓝色框中的图片会从左侧移动到距离左侧250个像素的位置。动画时长为2000毫秒。

二、JQuery的fade()方法

fade()方法也是JQuery中非常常用的动画方法之一，通过它可以实现元素的淡入淡出效果，也可以实现元素的隐藏与显示。

1. fade() 方法的语法

$(selector).fadeIn(speed,easing,callback);
$(selector).fadeOut(speed,easing,callback);
$(selector).fadeToggle(speed,easing,callback);
$(selector).fadeTo(speed,opacity,easing,callback);

参数说明：
- speed: 必填，规定完成动画的时间，单位为毫秒。
- easing：可选，规定在动画开始或者结束时，动画效果的速度变化。常用的值有 "swing"（默认效果）和 "linear"（相同速度的运动）。还可以使用回调函数自定义动画效果。
- callback: 可选, 动画结束后的回调函数，在动画完成时执行。
- opacity：可选，规定淡入/淡出到何种程度（0-1之间的数字）。

2. fade() 方法的示例

下面通过两个具体的示例来说明fade()方法的应用：

第一个示例实现的是淡入淡出的效果，我们可以鼠标移动上去时让图片渐渐变淡，鼠标移开时让图片慢慢显示出来。

HTML代码：

<img id="fade-img" src="https://via.placeholder.com/150"/>

JS代码：

$(document).ready(function(){
  $("#fade-img").mouseenter(function(){
    $(this).fadeTo("slow", 0.5);
  });
  $("#fade-img").mouseleave(function(){
    $(this).fadeTo("slow", 1);
  });
});

第二个示例说明如何使用fadeToggle()方法，用按钮来控制图片的显示与隐藏。

HTML代码：

<img id="toggle-img" src="https://via.placeholder.com/150"/>
<button id="toggle-btn">Toggle</button>

JS代码：

$(document).ready(function(){
  $("#toggle-btn").click(function(){
    $("#toggle-img").fadeToggle("slow");
  });
});

这个代码实现的效果是，当我们点击按钮时，蓝色框中的图片会淡出；再次点击按钮时，图片就会再次显示。