热门关键字:
jquery > jquery教程 > jquery教程 > jQueryfadeIn()和fadeOut()方法

jQueryfadeIn()和fadeOut()方法

379
作者:管理员
发布时间:2021/1/27 18:04:39
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=3532
您可以使用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
友荐云推荐