使用jquery将图像设置为顶部动画_Jquery_Html_Onclick

使用jquery将图像设置为顶部动画

jquery html

使用jquery将图像设置为顶部动画,jquery,html,onclick,Jquery,Html,Onclick,我希望动画中的图像位于顶部，这是代码。有什么问题 <!DOCTYPE HTML> <html> <head> <title>Majid</title> <style> * { margin: 0 auto; padding: 0; } body {

我希望动画中的图像位于顶部，这是代码。有什么问题

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


马吉德
* {
保证金：0自动；
填充：0；
}
身体{
背景：#333；
}
#盒子{
宽度：391px；
高度：131px；
边缘顶部：300px；
背景:#555；
位置：相对位置；
}
.图标{
宽度：128px；
高度：128px；
浮动：左；
border-1px实心#fff；
保证金：1px；
}
功能图标（）{
$（“一个img”）.animate（{top:'128px'}，300）；
}

试试这个：

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


马吉德
*{边距：0自动；填充：0；}
正文{背景：#333；}
#方框{宽度：391px；高度：131px；边距顶部：300px；背景：#555；位置：相对；}
.icon{宽度：128px；高度：128px；浮动：左；边框-1px实心35; fff；边距：1px；}
$（函数（）{
$（“#框a”）。单击（函数（事件）{
event.preventDefault（）；
$（this.find（“img”）.stop（）.animate（{“top”：“128px”}，300）；
});
});

只需在css中添加以下代码即可

.icon img{position:relative;}

并在css中添加

    .icon img{position:relative;}

seee工作演示

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

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

   });

    .icon img{position:relative;}