Javascript 如何使div沿对角线设置动画？_Javascript_Jquery

Javascript 如何使div沿对角线设置动画？

javascript jquery

Javascript 如何使div沿对角线设置动画？,javascript,jquery,Javascript,Jquery,我相对精通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.

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


$（文档）.ready（函数（）{
$（“#box1 div”）.animate（{left:'+=150'，top:'+=150'}，1000）；
});

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

谢谢

要使用

left

和

top

设置某个对象的动画，需要定位元素。

relative

或

absolute

，否则

left

和

top

不会对元素执行任何操作

请参见我的示例：

并将您的

#box1

元素直接定位为

$（#box1）

，而不是所有的子

div

都像您所做的那样在它里面，

$（#box1 div）

另外，在

之前将脚本下移到底部，以获得更好的性能和更好的实践。

您必须首先在CSS中设置

位置：绝对或相对
#box{
    position: absolute;
}

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

哦，是的，这样做：
$("div#box1")   //correct

而不是：
$("#box1 div")  //incorrect

演示：
给你的div一些位置，因为在设置位置后会使用left和top
<div id="box1" style="position:absolute;">s</div>

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

因为之前的版本选择了#box1的child
这是我找到的动画效果的最佳解决方案。。我认为你没有任何限制来支持旧版本的浏览器，你的动画就像吃蛋糕一样
试试这个
干杯
 看这里，选择器应该是$（'#box1'）
而不是$（'#box1 div'）
。你必须添加一些css。也可以设置页边空白的动画，而不是位置。这不应该被否决。好的，我做了，但它仍然没有做任何事情。它仍然没有做任何事情。很好，正在工作。（duh）我很确定，如果它在您的代码中不起作用，那么您的代码中还有其他问题。您可能不知道，但是否可以用它按对角线输入一些内容？是的，我想。。参观这个网站。。你将得到现场演示。。这个css能做什么。。
$("#box1").animate({left: '+=150', top: '+=150'}, 1000);