jQuery中怎样实现淡入淡出结果-百分百源码网

jQuery中怎样实现淡入淡出结果

发布时间：09/01 来源：未知浏览：关键词：

jQuery中有四种办法离别为fadeIn()、fadeOut()、fadeToggle()、fadeTo()，通过这四种办法可以实现淡入淡出的结果

今天要分享的是怎样通过jQuery来实现淡入淡出的结果，具有必然的参照作用，但愿对大家有所帮忙

【教程引荐：jQuery教程】

jQuery具有四种fade办法，离别是fadeIn()、fadeOut()、fadeToggle()、fadeTo()接下来在文章中将为大家详细介绍这几种办法怎样实现淡入淡出结果

fadeIn()办法

主要用于淡入已潜藏的元素，它有两个参数离别为:

speed ：表示结果的时长，可取“slow" ,"fast”或者是自定义的时间值。它是可选参数

callback :表示淡入结果完成后所施行的函数名称

fadeOut() 办法

主要用于淡出可见元素，它的参数值与fadeIn的值一样

fadeToggle() 办法

这个办法可以在 fadeIn() 与 fadeOut() 办法之间停止切换

假如元素已淡出，则 fadeToggle() 会向元素增加淡入结果

假如元素已淡入，则 fadeToggle() 会向元素增加淡出结果

fadeTo() 办法

fadeTo() 办法同意渐变为给定的不透亮度（值介于 0 与 1 之间）

fadeTo办法中除了包括speed和callback函数之外，还多了一个必需的 opacity 参数，目的在于将淡入淡出结果设定不透亮度

实例分享:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #img{
      width:300px;
      height:200px;
      position: absolute;
      top:40px;
    }
    button{
      position: absolute;
      top:10px;
    }
  </style>
</head>
<body>
  <script src="./jquery/jquery-1.12.4.js"></script>
  <script>
  $(document).ready(function(){
  $("button").click(function(){
   $("#img").fadeToggle(3000).fadeTo(0.5);
  });
});
</script>
<button>点击</button>
<img src="./images/22.jpg" id="img">
</body>
</html>

结果图：