我的jQuery animate方法有什么问题?

时间:2014-03-03 10:31:04

标签: jquery html html5

我只是制作一张从左到右,从右到左动画的图像?为什么这不起作用?我用一个完美移动的段落做了这个。但是有了图像它无法正常工作!

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $(".btn1").click(function(){
    $("img").animate({left:"100px"}, 'slow');
  });
  $(".btn2").click(function(){
    $("img").animate({left:"0"}, 'slow');
  });
});
</script>
</head>
<body>

<button class="btn1">Animate</button>
<button class="btn2">Reset</button>
<br />
<br />
<br />
<br />

<img src="https://google.com/favicon.ico" />

</body>
</html>

4 个答案:

答案 0 :(得分:1)

您需要为图片添加position

img {
    position: relative; /* or position: absolute */
}

以便left属性可以正常工作。

<强> Fiddle Demo

答案 1 :(得分:0)

您需要提供图像样式位置:绝对

<img src="https://google.com/favicon.ico" style="position:absolute"/>

DEMO

答案 2 :(得分:0)

您需要在img位置设置absolute

<img src="https://google.com/favicon.ico" style="position: absolute" />

答案 3 :(得分:0)

你需要这个:

<img src="https://google.com/favicon.ico" style="position: relative; left: 0" />

<强> FIDDLE DEMO