如何使用$ .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>