animating an attribute without animating other a attributes

Question

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>

score 4 · Accepted Answer · answered May 07 '14 at 15:11

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.

score 2 · Answer 2 · answered May 07 '14 at 15:11

2

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.

answered May 07 '14 at 15:11

Niet the Dark Absol

320,036
81
464
592

Where is the jQuery part... ;) – A. Wolff May 07 '14 at 15:12
1

@A.Wolff I think you know that CSS is too awesome for jQuery ^_^ – Niet the Dark Absol May 07 '14 at 15:13
css??? no , i want if with jquery. because some people are useing win 7 and IE yet !!! and CSS3 doesn't run in IE of win 7. – IVIajid May 07 '14 at 15:17
Windows 7 supports IE10, which itself supports CSS3 transitions. – Niet the Dark Absol May 07 '14 at 15:18
I don't think so! try it yourself. win 7 supports IE 9 . not the versions after that. – IVIajid May 07 '14 at 16:07
@user3503363 Considering I'm using IE11 on Windows 7 *right now*, you may wish to revise your statement. It's Windows XP that doesn't support anything past IE9, and that's because Windows XP is no longer supported, period. – Niet the Dark Absol May 07 '14 at 16:08
mmmm ... I tried it once and didn't get successful . – IVIajid May 07 '14 at 16:12

animating an attribute without animating other a attributes

2 Answers2