0

在这里写我的第一段代码，所以请忍受我的无能。我正在编写一个简单的单页 Dreamcatcher 应用程序，我希望页面加载后顶部的文本会慢慢消失。我想我写的一切都是正确的，但是当我加载页面时，文本不会褪色。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>DreamCatcher</title>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <p class="heading">Your Personal <span>Digital<span> Dreamcatcher</p>
        <img src="http://www.eastofthesun.com/pi7/images/dreamcatcher21.gif" class="pic">
    </body>
</html>

JavaScript：

$(document).ready(function() {
    $('.heading').fadeOut(2500);
});

CSS（可能不相关）：

@font-face{
    font-family:"Beowulf";
    src:url('C:/Users/JGSACKIN/Documents/Fonts/BEOWULF_.eot');
    src:local('BEOWULF_'), url('C:/Users/JGSACKIN/Documents/Fonts/BEOWULF_.ttf') format(truetype), url('C:/Users/JGSACKIN/Documents/Fonts/BEOWULF_.svg') format(svg);
}

.heading{
    font-family: Beowulf;
    text-align: center;
    font-size:50px;
    -webkit-opacity:1;
    opacity:1;
    -webkit-transition: all 3s ease;
    transition: all 3s ease;
}

.pic{
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:25%;
    height:25%;
}

我在哪里搞砸了？

4

1 回答 1

1

首先，我看不到您在哪里引用 jQuery，所以让我们添加它。在当前<script>标签上方添加这一行：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

您的 jQuery DOM 就绪函数也应该在<script>标签中：

<script>
    $(document).ready(function() {
        $('.heading').fadeOut(2500);
    });
</script>
于 2013-06-28T16:48:46.957 回答