使用 Jquery 来淡化 HTML 元素-之路教程

页面加载时激活淡入淡出

在页面加载时启动淡入淡出效果有时很有用，这是使用 .on 方法添加事件处理程序的简单问题，在这种情况下，我们将使用 load 事件处理程序，它会在页面加载时立即激活元素已加载。
IE。

$(window).on("load", function() {
  $('#item1').fadeIn('slow', function() {
    //First Animation complete
    $(this).fadeOut('slow', function() {
      //Second Animation complete
    });
  });
});

在这个例子中，我们将事件处理程序添加到 window 对象，这将使效果在页面加载后立即开始。
如果我们想更早地打开它——在图像、框架和对象之前——使用文档而不是窗口。

例子

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Using jquery to fade elements on a page</title>
    <style type="text/css">
     #item1 {
	  display: none;
     }
    </style>
    <script src="jquery-1.10.2.min.js" type="text/javascript">
    </script>
  </head>
  <body>
    <button id="fade">Click here to fade</button>
    <div id="item1">Just some textural content in a div...</div>

    <script type="text/javascript">
     $('#fade').click(function() {
       $('#item1').fadeIn('slow', function() {
         //First Animation complete
         $(this).fadeOut('slow', function() {
         //Second Animation complete
         });
       });
     });
    </script>
  </body>
</html>

使用 Jquery 来淡化 HTML 元素

使用 jquery 为 HTML 元素添加淡入淡出效果非常简单，我们将在本教程中使用淡入淡出和淡出方法。
我们可以选择使用字符串 fast 或者 slow 作为持续时间值，或者我们可以提供我们想要的动画长度（以毫秒为单位）。
IE。

$('#fade').click(function() {
  $('#item1').fadeIn('slow', function() {
    //Animation complete
  });
});

在我们的页面中包含 jquery 脚本文件后，我们需要做的就是将上述代码放在页面正文部分的脚本元素中。

使用 jquery 很容易扩展动画，因此如果我们希望元素自动淡出，我们只需在动画完成后添加更多代码即可。
IE。

$('#fade').click(function() {
  $('#item1').fadeIn('slow', function() {
    //First Animation complete
    $(this).fadeOut('slow', function() {
      //Second Animation complete
    });
  });
});

注意用于fadeOut 函数调用的$(this) 部分，它可以用于后续调用以引用正在淡化的元素，这样我们就不必一遍又一遍地键入元素的ID。

日期：2020-06-02 22:17:28 来源：oir作者：oir

←.jpg 和 .jpeg Mime 类型

使用 Jquery slideToggle 实现幻灯片效果→

页面加载时激活淡入淡出

例子

目录