IT技术博客网
使用jQuery实现2秒钟淡入效果显示所有 <p> 元素：
使用语法
$(selector).fadeIn(speed,easing,callback)
语法说明
| 参数 | 描述 |
| speed | 可选。规定褪色效果的速度。 可使用的值： 毫秒 - 1000为1秒 "slow" "fast" |
| easing | 可选。规定在动画的不同位置上的变化速度。 默认值为 "swing"。 可以使用的值： "swing" - 在开头/结尾移动慢，在中间变化快 "linear "- 全程匀速变化 |
| callback | 可选。fadeIn() 方法执行完之后，要执行的其他函数。 |
完整的演示代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>fadeIn()&fadeOut()方法演示代码模板</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut(2000)//2秒钟淡出
});
$(".btn2").click(function(){
$("p").delay(2000).fadeIn();//2秒钟淡入
});
});
</script>
</head>
<body>
<p>这是JQ一个演示页面</p>
<button class="btn1">淡出</button>
<button class="btn2">淡入</button>
</body>
</html>
写评论