di{ width:100px;

 height:100px;
 background:#F00;}

</style>
</head>
<body>
<p id="di"></p>
</body>
</html>

伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(5)

ringa_lee2017-04-10 17:31:57 5楼

需要设置potision:absolute或者position:relative

赞 +0

添加回复

天蓬老师2017-04-10 17:31:57 4楼

使用animate实现动画前，你要确保你需要改变的值是有效的，也就是说，就是在不使用animate的情况下，直接将此属性设置成css，其效果是可以被展示的。

对于你的例子，你可以直接把这个di的css中加入left:250px，你会发现本身p就没有被移动，所以即使你使用了animate动画，也是没有效果的。其原因是你的p的position不是relative或者absolute的，也就不支持left属性。

赞 +0

添加回复

怪我咯2017-04-10 17:31:57 3楼

你代码里有如下几个问题：
不动是因为你没有为 #di 的css设置 position:absolute 或者 relative

完整的应该如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    $(function() {
      $("#di").click(function() {
        $(this).animate({
          left: '250px'
        });
      });
    });
</script>
<style>
#di {
  position: absolute;
  width:100px;
  height:100px;
  background:#F00;
}
</style>
</head> 
<body>
<p id="di"></p>
</body>
</html>

最后建议把问题重新排版一下，格式太乱。

希望有所帮助~ ：）

赞 +0

添加回复