animating an attribute without animating other a attributes

StackOverflow https://stackoverflow.com/questions/23521564

题

look at this code . when I hover an img , all of the images will animate to top . i don,t want this. I want if i hover mouse on any of them , just that one animate to top.

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

有帮助吗？

解决方案

Change your links to:

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

And your jQuery to:

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

Be sure to wrap this jQuery in a document ready handler OR place it at the end of the page.

其他提示

Try this:

Add the following CSS:

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

Now remove all JavaScript/jQuery/onmouseover events.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top