使用jquery動畫圖像頂部

我希望我的圖像在這個動畫頂部，這是代碼。這是什麼問題使用jquery動畫圖像頂部

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

來源

2014-05-07 IVIajid

甲酸代碼PLZ –

ü可以使小提琴？ –

只需添加以下代碼到你的CSS

.icon img{position:relative;}

來源

2014-05-07 12:30:42

$(function() { 

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

    event.preventDefault(); 
    $(this).find("img").stop().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>

來源

2014-05-07 12:26:54

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

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

    });

，並在CSS ADDD

.icon img{position:relative;}

SEEE工作演示

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

來源

2014-05-07 12:35:34

使用jquery動畫圖像頂部

回答

相關問題