[英]How do i make a div animate diagonally?
我相对精通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>
我知道它可能确实很愚蠢，但是有人知道问题出在哪里吗？ 谢谢！
您必须首先使其position: absolute CSS中的position: absolute或relative 。
#box{
position: absolute;
}
$("#box1").animate({left: '+=150', top: '+=150'}, 1000);
哦，是的，这样做：
$("div#box1") //correct
代替：
$("#box1 div") //incorrect
要使用left和top设置动画，需要定位元素。 relative或absolute ，否则left和top对元素没有任何作用。
在这里查看我的示例： http : //jsbin.com/ayafup/edit#html，实时
并将#box1元素直接定位为$(#box1) ，而不是在执行操作时将其中的所有子div都定位为$(#box1 div)
通常，还可以将脚本移到</body>之前的底部，以获得更好的性能和更好的实践。
给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);
因为previos正在选择＃box1的子代
如何为元素赋予动画以沿对角线方向移动而无需translateX和translateY？
[英]How do I animate an element to move diagonally without translateX and translateY?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.