HTML网页使字体(淡化)消失的方法

1. html方法

<h1 id = "msg"> Hello Word, Goog Bye!</h1>

<script>
    function hideMsg() {
        // 将要隐藏的字体直接置为空字符串
        document.getElementById("msg").innerHTML = "";
    }

    // 当页面加载出来的时候就开始执行
    $(document).ready(function() {
        $(function () {
            // 当页面页面加载出来两秒之后开始执行setInterval函数
            setInterval(hideMsg, 2000);
        });
    });
</script>

注: 可以参考一下setInterval的详细用法  https://www.runoob.com/jsref/met-win-setinterval.html

2. jquery方法

<h1 class= "msg"> Hello World, Good Bye!</h1>

<script>
    $(document).ready(function() {
        $(function () {
            // 设置成3秒钟淡出
            $(".msg").fadeOut(3000);
        });
    });
</script>

注: 可以参考一下jquery中淡入淡出的详细用法  http://www.w3school.com.cn/jquery/jquery_fade.asp

总结：
1. 从代码看jquery方法比html的方法看起来更加简洁
2. 从效果上看，jquery是淡出的效果(渐渐消失)， 而html是直接消失， 所以jquery的效果看起来更舒服
3. 格式上面两个种方法都可以修改为按钮的形式，点击按钮执行函数
4. 要注意html中是<h1 id = "msg"></h1>, jquery中的是<h1 class= "msg"></h1>