Jquery Fade用法详解

Jquery Fade是一种常用的动画效果，可以让元素在渐变的过程中显示或隐藏。在Jquery中，可以使用.fadeIn()方法和.fadeOut()方法分别对元素进行显示和隐藏操作。

fadeIn方法：

使用fadeIn方法可以将元素慢慢地显示出来。这个方法可以带有两个参数：速度和回调函数。

示例代码如下：

$(document).ready(function(){
  $("#button1").click(function(){
    $("#div1").fadeIn(1000);
  });
});

在上面的代码中，当按钮被点击时，元素#div1会在1秒钟内进行渐显操作。

fadeOut方法：

使用fadeOut方法可以将元素慢慢地隐藏。这个方法也可以带有两个参数：速度和回调函数。

示例代码如下：

$(document).ready(function(){
  $("#button2").click(function(){
    $("#div2").fadeOut(1000);
  });
});

在上面的代码中，当按钮被点击时，元素#div2会在1秒钟内进行渐隐操作。

fadeIn和fadeOut的配合使用：

fadeIn和fadeOut方法也可以结合使用来制作一个连续渐变的动画效果。比如，在点击按钮时，先将一个元素淡出，然后在新的内容素渐显。

示例代码如下：

$(document).ready(function(){
  $("#button3").click(function(){
    $("#div3").fadeOut(1000,function(){
      $("#div3").html("Hello World!");
      $("#div3").fadeIn(1000);
    });
  });
});

在上面的代码中，当按钮被点击时，元素#div3会进行一次1秒钟的渐隐操作，然后回调函数中的代码会将#div3中的HTML内容更新为"Hello World!"，最后再进行一次1秒钟的渐显操作。

总结：

Jquery Fade是一种非常实用的动画效果，能够通过fadeIn和fadeOut方法来实现渐显和渐隐的效果，同时也可以结合使用来制作更多的动画效果，如文字出现消失等。