Question

我正在尝试使用CSS3的@keyframes规则在悬停时设置div动画。动画的代码位于this page的最底部（在慷慨标记的“HERE BE ANIMATION”评论ASCII艺术之后）。这包括@keyframes规则，div和div：hover。我想要这个动画的页面是right here。出于某种原因，动画不起作用;这是我第一次尝试使用CSS动画，所以在某处可能会有一些新手的错误。

Answer 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);
}

经过测试，工作。

在悬停时使用CSS动画div

1 个答案: