animate the image to top with jquery

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

  •  17-07-2023
  •  | 
  •  

Question

i want that my image in that animate to top and this is the code. what is the problem

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

Solution

Just add below code into you css

.icon img{position:relative;}

OTHER TIPS

  $("#box a").click(function(event) { 

  event.preventDefault();
  $(this).find("img").stop().animate ({"top" : '128px'} , 300);

   });

and addd in css

    .icon img{position:relative;}

seee working demo

http://jsfiddle.net/eyP4N/1/

$(function() { 

  $("#box a").click(function(event) { 

    event.preventDefault();
     $(this).find("img").stop().animate ({"top" : '128px'} , 300);

    });

});

Try this:

<!DOCTYPE HTML>
<html>
<head>
<title>Majid</title>
<style>
* {margin:0 auto; padding:0;}
body {background:#333;}
#box {width:391px; height:131px; margin-top:300px; background:#555; position:relative;}
.icon {width:128px; height:128px; float:left; border-1px solid #fff; margin:1px;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function() { 

  $("#box a").click(function(event) { 

    event.preventDefault();
     $(this).find("img").stop().animate ({"top" : '128px'} , 300);

    });

});
</script>
</head>
<body>
<div id="box">
<a href="#"  class="icon"><img src="images/fb.jpg" alt="" /></a>
<a href="#"  class="icon"><img src="images/tt.jpg" alt="" /></a>
<a href="#"  class="icon"><img src="images/gp.jpg" alt="" /></a>
</div>
</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top