jQuery：如何在另一个div内更改div的位置，然后创建滑动效果？

Question

我目前有一个div，并使用CSS将其制成红色框的形状，ID为#box。 为了使它看起来整洁，我将#box放在另一个div中。 我想知道如何将#box的位置更改为屏幕上的其他位置（左上角说），然后使其滑到屏幕的右下角。

$(document).ready(function(){

/*Limits for Glide*/
var top_limit = "10px";
var left_limit = "10px";
var right_limit = "600px";
var bottom_limit = "600px";

/*Glide*/
$('#glide').click(function(){
    $('#box').css("left",left_limit).css("top",top_limit);
    $('#box').animate({"left": right_limit, "top": bottom_limit},2000);
});

});

至于我的div，我的html文件中有很多东西，但是主要的是这些。

.subDiv {
    width: 600px;
    height: 250px;
    margin: 0 auto;
    padding: 10px;
    background-color: #876D52;
    border: 3px solid white;
}
#box{
    width: 250px;
    height: 200px;
    background: #FF9933;
    margin: 0 auto;
}

Answer 1

如果您是专门在“屏幕上”而不是在谈论DOM位置，则可以使用position: absolute ，然后将其设置为left: 0这会将有问题的“ div”定位在屏幕的最左侧。 然后，为其left属性设置动画，使其具有“滑行”效果。

但是您必须要小心。 将项目“以可视方式”从其父容器中取出而不是在DOM中保留它们是相同的做法，这不是一个好习惯，只是因为这样会造成混淆。 （哦，在源代码中，它是该容器的子级，但在屏幕上却没有那样显示）

我希望这是有道理的，请让我知道是否有任何问题。

Answer 2

为了使js具有动画效果，您必须添加position: absolute; 到您要设置动画的对象：

#box{
position: absolute;
width: 250px;
height: 200px;
background: #FF9933;
margin: 0 auto;

}