动画属性而不动画其他属性答案

【问题标题】：animating an attribute without animating other a attributes动画属性而不动画其他属性
【发布时间】：2014-05-07 15:08:51
【问题描述】：

看看这段代码。当我悬停 img 时，所有图像都会动画到顶部。我不想要这个。如果我将鼠标悬停在其中任何一个上，我想要，只是那个动画到顶部。

<!DOCTYPE HTML>
<html>
<head>
    <title>Majid</title>
    <style>
        * {
            margin: 0 auto;
            padding: 0;
        }
        body {
            background: #333;
        }
        #box {
            width: 390px;
            height: 128px;
            margin-top: 300px;
            background: #555;
            position: relative;
overflow:hidden;
        }
#box a {
            width: 128px;
            height: 128px;
            float: left;
            margin: 0 1px;
        }
.icon img{position:relative;}
    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
 function icons(){
   $("a img") .animate({top: '-125px'});
 }
    </script>
</head>
<body>
    <div id="box">
        <a href="JavaScript:();" onmouseover="icons();" class="icon"><img src="images/fb.jpg"   alt="" /></a>
        <a href="JavaScript:();" onmouseover="icons();" class="icon"><img src="images/tt.jpg" alt="" /></a>
        <a href="JavaScript:();" onmouseover="icons();" class="icon "><img src="images/gp.jpg" alt="" /></a>
    </div>
</body>

【问题讨论】：

标签： jquery html jquery-animate onmouseover

【解决方案1】：

将您的链接更改为：

<a href="#" class="icon"><img src="images/fb.jpg"   alt="" /></a>

还有你的 jQuery：

$(document).ready(function () {
    $("a img").on('mouseover', function () {
        $(this).animate({
            top: '-125px'
        });
    });
});

确保将此 jQuery 包装在文档就绪处理程序中或将其放在页面末尾。

【讨论】：

【解决方案2】：

试试这个：

添加以下 CSS：

#box a {
    transition: top 0.4s ease;
}
#box a:hover {
    top: -125px;
}

现在删除所有 JavaScript/jQuery/onmouseover 事件。

【讨论】：

jQuery 部分在哪里... ;)
@A.Wolff 我想你知道 CSS 对于 jQuery 来说太棒了 ^_^
css？？？不，我想要如果使用 jquery。因为有些人还在用win 7和IE！！！并且 CSS3 不能在 win 7 的 IE 中运行。
Windows 7 支持 IE10，它本身支持 CSS3 过渡。
我不这么认为！自己试试。 win 7 支持 IE 9。不是之后的版本。