Question

我相对精通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>

我知道它可能是非常愚蠢的东西，但有人知道问题是什么吗？谢谢！

Answer 1

您必须先在CSS中创建position: absolute或relative。

#box{
    position: absolute;
}

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

哦，是的，这样做：

$("div#box1")   //correct

而不是：

$("#box1 div")  //incorrect

DEMO：http://jsfiddle.net/DerekL/bwg8R/

Answer 2

要使用left和top制作动画，需要定位元素。 relative或absolute，否则left和top不对该元素执行任何操作。

请参阅我的示例：http://jsbin.com/ayafup/edit#html,live

将#box1元素直接定位为$(#box1)，而不是将所有子div置于其中，$(#box1 div)

在</body>之前将脚本向下移动到底部，以获得更好的性能和更好的练习。

Answer 3

给你的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的孩子

Answer 4

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

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

干杯... !!!

如何对角线制作div动画？

4 个答案: