在悬停时使用 CSS 为 div 设置动画答案

【问题标题】：Animating a div with CSS on hover在悬停时使用 CSS 为 div 设置动画
【发布时间】：2012-04-24 08:27:34
【问题描述】：

我正在尝试使用 CSS3 的 @keyframes 规则在悬停时为 div 设置动画。动画的代码在this page 的最底部（就在大方标记的“HERE BE ANIMATION”注释 ASCII 艺术之后）。这包括@keyframes 规则、div 和 div:hover。我想要这个动画的页面是right here。由于某种原因，动画不起作用；这是我第一次尝试使用 CSS 动画，所以在某处可能存在一些新手错误。

【问题讨论】：

任何浏览器都不支持@keyframes 规则。 Firefox 支持另一种选择，@-moz-keyframes 规则。 Safari 和 Chrome 支持另一种选择，@-webkit-keyframes 规则。你确定你还需要搞砸这个吗？ =)
我认为@-webkit-keyframes 规则已经存在；我放弃了 -moz 因为 Dreamweaver 没有将其识别为有效的 @keyframes 变体。但是我在Chrome中测试了页面，动画没有显示。
我认为您在问题中留下了指向您感兴趣的实际页面的链接
我的错。样式表的链接现在可以使用了。

标签： animation css keyframe

【解决方案1】：

如果您尝试将 div 从 0px 设置为 200px，则使用 jQuery 解决方案要容易得多。与 @keyframe 相比，jQuery 提供了跨浏览器兼容性，后者仅在 Safari 和 Chrome 中受支持。

这里是一个例子：http://jsfiddle.net/ZgcxL/

编辑：

如果您不希望您的用户仅限于 Chrome 和 Safari，那么您绝对应该考虑使用 jQuery。使用起来非常简单。只需在 <head></head> 标记之间添加此代码即可。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('.macanimation').hover(function() {
        $(this).animate({top: '200px'});
    });
  });
</script>

编辑 2：

我忘记了 document.ready()。重新粘贴上面的代码。还要添加位置：绝对；到您的 div 并将“px”添加到您的宽度：

div.macanimation {
    position: absolute;
    width:960px;
    height:500px;
    padding-left:40px;
    padding-right:40px;
    margin:auto;
    background-image:url(/Photos/MacHQ.png);
}

经过测试，工作正常。

【讨论】：

我很乐意，但我对 jQuery 的了解比对 CSS3 的了解要少得多（例如，我从未使用过它）。如果这是唯一可能的解决方案，我会尝试一下；否则，我宁愿坚持 CSS3。
实际上，我刚刚将最新的 jquery.js 放到了我的 root/js 文件夹中，我已经准备好尝试 jQuery 了。我在哪里放置这个脚本？ $('div').hover(function() { $(this).animate({top: '200px'}); });
好的，我已将代码添加到页面（并将脚本指向 jquery.mins.js 文件的本地版本）。到目前为止，什么都没有。
这似乎有效。目前，我已经创建了一个 Hype 动画（我不是它的忠实粉丝，因为该应用程序会生成大量难以理解的代码，我无法对其进行故障排除或自定义）。但我将在我的网站上多次使用这种动画，从现在开始我将使用 jQuery。谢谢！
我不会使用 Dreamweaver，因为它添加了很多额外的不需要的编码。最好的方法是 TextPad/记事本。 jquery.com 上免费提供所有文档