Question

有人可以快速告诉我我做错了什么：这可能是一个非常简单的错误。

<!DOCTYPE html>
<html>
<head>
<title>Random Animation Bullshit</title>
<link href='http://fonts.googleapis.com/css?family=Cutive+Mono' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="animation.css"/>
</head>
<body>
<div id="moving_header">
    <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Products</a></li>
    </ul>

    <h1>DELL Computers</h1>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $("#moving_header").mouseover(function() {
        $("#moving_header").animate({
        margin-top: 0px;
        }, 5000);
    });
});
</script>
</body>
</html>

当我鼠标悬停在div上时，根本没有任何事情发生。我希望它从屏幕顶部向下滑动。

更新：这就是我现在所拥有的。仍然不起作用......

<!DOCTYPE html>
<html>
<head>
<title>Random Animation Bullshit</title>
<link href='http://fonts.googleapis.com/css?family=Cutive+Mono' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" href="animation.css"/>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<div id="moving_header">
    <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Products</a></li>
    </ul>

    <h1>DELL Computers</h1>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $("#moving_header").mouseover(function() {
        $("#moving_header").animate({
        marginTop: '0px';
        }, 5000);
    });
});
</script>
</body>
</html>

更新：这是我的CSS：

#moving_header {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    background: #FF6600;
    color: white;
    width: 100%;
    height: 200px;
    text-align: center;
    margin-top: -100px;
}

#menu {
    padding: 0px;
    margin-top: 40px;
}

#menu li {
    display: inline;
    margin: 20px;
}

#menu li a {
    text-decoration: none;
    color: white;
    font-family: Cutive Mono, sans;
    font-size: 30px;
}

#menu li a:hover {
    text-decoration: underline;
}

#moving_header h1 {
    font-family: Cutive Mono, sans;
    font-size: 60px;
}

Answer 1

这是因为jQuery不在你的文件中。这是添加了jQuery的标题的修改版本：

<head>
<title>Random Animation Bullshit</title>
<link href='http://fonts.googleapis.com/css?family=Cutive+Mono' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="animation.css"/>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>

编辑：改为使用

<head>
<title>Random Animation Bullshit</title>
<link href='http://fonts.googleapis.com/css?family=Cutive+Mono' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="animation.css"/>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>

如何动画分区？

1 个答案: