您可以使用jQueryfadeIn()和fadeOut()方法通过逐渐增加或减小其不透明度来显示或隐藏HTML元素。
例试试这个代码»
<script>
$(document).ready(function(){
// Fading out displayed paragraphs
$(".out-btn").click(function(){
$("p").fadeOut();
});
// Fading in hidden paragraphs
$(".in-btn").click(function(){
$("p").fadeIn();
});
});
</script>
与其他jQuery效果方法一样,您可以选择为fadeIn()和fadeOut()方法指定持续时间或速度参数,以控制衰落动画的运行时间。可以使用预定义的字符串'slow'或之一来指定持续时间,也可以'fast'以毫秒为单位;较高的值表示较慢的动画。
例试试这个代码»
<script>
$(document).ready(function(){
// Fading out displayed paragraphs with different speeds
$(".out-btn").click(function(){
$("p.normal").fadeOut();
$("p.fast").fadeOut("fast");
$("p.slow").fadeOut("slow");
$("p.very-fast").fadeOut(50);
$("p.very-slow").fadeOut(2000);
});
// Fading in hidden paragraphs with different speeds
$(".in-btn").click(function(){
$("p.normal").fadeIn();
$("p.fast").fadeIn("fast");
$("p.slow").fadeIn("slow");
$("p.very-fast").fadeIn(50);
$("p.very-slow").fadeIn(2000);
});
});
</script>
如果您觉得本文的内容对您的学习有所帮助:
关键字:
html