如何为 div 设置动画？答案

【问题标题】：How to Animate a Div?如何为 div 设置动画？
【发布时间】：2014-12-15 17:47:36
【问题描述】：

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

<!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;
}

【问题讨论】：

你加入了 jQuery 吗？？
你没有在页面中包含 jquery
去掉margin-top: 0px;之后的分号——另外，我认为这两个都需要是字符串，所以用引号括起来margin-top和0px
代码看起来不错。鼠标悬停前的margin-top是什么？如果为 0px，则动画到 0px 时不会发生任何事情；
另外，需要“marginTop”而不是margin-top，“0px”需要引号。

标签： javascript jquery html animation

【解决方案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>

【讨论】：

你应该使用 marginTop: '0px'，而不是 margin-top: 0px
不，仍然没有做任何事情。
div的初始位置是什么？
考虑到初始边距为 0，我将向其添加 100px。
对最初的答案进行了更改，意识到我给你的链接错误，我的错！