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