使用JQ来编写最基本的淡入淡出效果附演示动画

下面是使用JQ来编写最基本的淡入淡出效果的攻略。

步骤一：引入JQ库

在HTML文件的头部引入JQ库的代码，代码如下：

<!-- 引入JQ库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

步骤二：编写淡入淡出效果

在HTML文件中定义需要添加淡入淡出效果的元素，例如一个按钮。并对需要添加效果的元素进行设置，例如：opacity属性、display属性，代码如下：

<!-- 定义按钮元素 -->
<button id="btn">点击出现文字</button>

<!-- 定义需要添加效果的元素 -->
<div id="text" style="opacity: 0; display: none;">
  这是一个淡入淡出效果的文字
</div>

在JQ中使用fadeIn和fadeOut方法来实现淡入淡出效果。fadeIn方法将需要添加效果的元素淡入显示，fadeOut方法将元素淡出隐藏。代码如下：

$(document).ready(function() {
  // 点击按钮触发淡入淡出效果
  $('#btn').click(function() {
    // 判断需要添加效果的元素是否被隐藏
    if($('#text').css('display') == 'none') {
      $('#text').fadeIn('slow');
    } else {
      $('#text').fadeOut('slow');
    }
  });
});

以上代码中，首先使用了document的ready方法，保证页面加载完成后才会执行后面的代码。然后在按钮被点击时，使用了fadeIn和fadeOut方法来实现淡入淡出效果。if语句用来判断元素当前的状态，如果元素已被隐藏，则使用fadeIn方法将其淡入显示，否则使用fadeOut方法将其淡出隐藏。

示例一

在一个页面中，有三个按钮分别控制三个不同的div元素，点击按钮时，对应的div元素出现淡入淡出效果。示例代码如下：

<!-- 引入JQ库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 定义按钮元素 -->
<button id="btn1">点击显示1</button>
<button id="btn2">点击显示2</button>
<button id="btn3">点击显示3</button>

<!-- 定义需要添加效果的元素 -->
<div id="text1" style="opacity: 0; display: none;">
  这是第一个淡入淡出效果的文字
</div>
<div id="text2" style="opacity: 0; display: none;">
  这是第二个淡入淡出效果的文字
</div>
<div id="text3" style="opacity: 0; display: none;">
  这是第三个淡入淡出效果的文字
</div>

<!-- JS代码 -->
<script>
$(document).ready(function() {
  // 按钮1
  $('#btn1').click(function() {
    if($('#text1').css('display') == 'none') {
      $('#text1').fadeIn('slow');
    } else {
      $('#text1').fadeOut('slow');
    }
  });

  // 按钮2
  $('#btn2').click(function() {
    if($('#text2').css('display') == 'none') {
      $('#text2').fadeIn('slow');
    } else {
      $('#text2').fadeOut('slow');
    }
  });

  // 按钮3
  $('#btn3').click(function() {
    if($('#text3').css('display') == 'none') {
      $('#text3').fadeIn('slow');
    } else {
      $('#text3').fadeOut('slow');
    }
  });
});
</script>

示例二

在一个页面中，有多个图片，鼠标移动到图片上时，图片出现淡入淡出效果，并且出现图片标题。移开鼠标时，图片再次淡出隐藏。示例代码如下：

<!-- 引入JQ库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 定义多个图片和图片标题 -->
<div class="image">
  <img src="./img/pic1.jpg">
  <div class="title">这是第一张图片</div>
</div>
<div class="image">
  <img src="./img/pic2.jpg">
  <div class="title">这是第二张图片</div>
</div>
<div class="image">
  <img src="./img/pic3.jpg">
  <div class="title">这是第三张图片</div>
</div>

<!-- JS代码 -->
<script>
$(document).ready(function() {
  $('.image').hover(
    function() {
      // 鼠标移入时
      $(this).find('img').fadeIn('slow');
      $(this).find('.title').fadeIn('slow');
    },
    function() {
      // 鼠标移出时
      $(this).find('img').fadeOut('slow');
      $(this).find('.title').fadeOut('slow');
    }
  );
});
</script>

以上代码中，使用了hover事件来绑定鼠标移入移出事件。当鼠标移入时，使用find方法来查找元素并使用fadeIn方法将其淡入显示。当鼠标移出时，使用find方法来查找元素并使用fadeOut方法将其淡出隐藏。