如何使用$ .fadeTo()方法在jQuery中创建动画?

fadeTo()方法将所有匹配元素的不透明度降低为指定的不透明度,并在完成后触发可选的回调。

这是此方法使用的所有参数的描述-

  • speed-代表三个预定义速度(“慢”,“ def”或“快”)之一或运行动画的毫秒数(例如1000)的字符串。

  • 不透明度-0到1之间的数字表示目标不透明度。

  • callback-这是可选参数,表示动画完成后要调用的函数。

您可以尝试运行以下代码以了解如何fadeTo()在jQuery中使用方法-

示例

<html>
<head>
<title>jQuery fadeTo() method</title>
   <script type = "text/javascript"
      src = "https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
   <script type = "text/javascript" language = "javascript">
      $(document).ready(function() {
         $("#more").click(function(){
            $(".target").fadeTo( 'slow', 0.7, function(){
               $(".log").text('More Opacity Transition Complete');
            });
         });
         $("#less").click(function(){
            $(".target").fadeTo( 'slow', 0.2, function(){
               $(".log").text('less Opacity Transition Complete');
            });
         });
      });
   </script>
<style>
p {background-color:#bca; width:200px; border:1px solid green;}
</style>
</head>
<body>
<p>Click on any of the buttons</p>
   <button id = "less"> Less Opacity </button>
   <button id = "more"> More Opacity</button>
   <div class = "target">
      <img src = "/images/jquery.jpg" alt = "jQuery" />
      </div>
   <div class = "log"></div>
</body>
</html>