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;

}

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

2 个答案: