Question

在这里编写我的第一段代码，以免我的无能为力。我正在写一个简单的单页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%;
}

我在哪里乱搞？

Answer 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>

jquery fadeOut函数不起作用

1 个答案: