3

我比较精通html和css，但不是javascript和jquery。我试图让一个 div 对角线移动，但它不起作用。
这是我的代码：

<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<script type="text/javascript"> 
$(document).ready(function(){
 $("#box1 div").animate({left: '+=150', top: '+=150'}, 1000);​​​​​​​​​​​​​​​
});
</script>
<div id="box1"></div>
</body>
</html>

我知道这可能真的很愚蠢，但是有人知道问题出在哪里吗？谢谢！

4

4 回答 4

4

您必须先制作它position: absolute或relative在 CSS 中制作它。

#box{
    position: absolute;
}

$("#box1").animate({left: '+=150', top: '+=150'}, 1000);

哦，是的，这样做：

$("div#box1")   //correct

代替：

$("#box1 div")  //incorrect

演示：http: //jsfiddle.net/DerekL/bwg8R/

于 2012-06-18T04:15:35.407 回答
1

要使用动画制作某些东西left，并且top需要定位元素。要么relativeor ，absolute否则不对元素做任何事情。lefttop

在此处查看我的示例：http: //jsbin.com/ayafup/edit#html,live

并将您的#box1元素直接定位为，而不是像您所做的那样将$(#box1)所有 child 都放在其中，div$(#box1 div)

还要将您的脚本向下移动到底部，</body>以获得更好的性能和更好的实践。

于 2012-06-18T04:15:28.510 回答
0

给您的 div 一些位置，因为在设置位置后使用 left 和 top

<div id="box1" style="position:absolute;">s</div>

在 javascript 中

$("#box1 div").animate({left: '+=150', top: '+=150'}, 1000);

应该

$("#box1").animate({left: '+=150', top: '+=150'}, 1000);

因为上一个是选择 #box1 的子项

于 2012-06-18T04:15:44.270 回答
0

这是我为动画效果找到的最佳解决方案。我没有任何限制来支持旧版本的浏览器，而不是你的动画就像吃蛋糕一样。

试试这个http://daneden.me/animate/

干杯...！！！

于 2012-06-18T05:01:50.620 回答