Html jquery如何在父div的右侧设置子div的动画？

我想设置子div宽度的动画，使其脱离父div。 在我链接子对象的代码中，div在父div内部设置动画，但不在父div外部设置动画

请帮忙

$（文档）.ready（（）=>{
下降=假；
$（“.parent”）。单击（（）=>{
if（drop==true）{
$（“.child”）.animate({
宽度：“0px”
});
下降=假；
}else if（drop==false）{
$（“.child”）.animate({
宽度：“200px”
});
下降=真；
}
})
});
.parent{
宽度：40%；
高度：200px；
位置：相对位置；
背景色：红色；
}
.孩子{
宽度：0px；
高度：200px；
位置：绝对位置；
右：0；
排名：0；
背景色：浅绿色；
}
您可以将宽度更改为例如400px，它将扩展为400px。您可以使用100%匹配红色框，或者使用150%比红色框多50%

如果要向右生长，请将
.child
右：0
的css更改为
左：0


$（文档）.ready（（）=>{
下降=假；
$（“.parent”）。单击（（）=>{
if（drop==true）{
$（“.child”）.animate({
宽度：“0px”
});
下降=假；
}else if（drop==false）{
$（“.child”）.animate({
宽度：“400px”
});
下降=真；
}
})
});
.parent{
宽度：40%；
高度：200px；
位置：相对位置；
背景色：红色；
}
.孩子{
宽度：0px；
高度：200px；
位置：绝对位置；
左：0；
排名：0；
背景色：浅绿色；
}
当您说希望子元素在右侧的父元素之外设置动画时，我假设您的意思是让它滑出父元素

您已经在jQuery中设置了宽度，因此只需将
right
设置为负数，使其向相反方向延伸，例如：

  $(".child").animate({width: "200px", right: "-200px" });

然后要重置它，只需将
设置为right:0
，例如

  $(".child").animate({width: "0px", right:"0"});

工作片段：


$（文档）.ready（（）=>{
下降=假；
$（“.parent”）。单击（（）=>{
如果（drop==true）{
$（“.child”）.animate（{width:“0px”，right:“0”}）；
下降=假；
}如果（drop==false）{
$（“.child”）.animate（{width:“200px”，right:“-200px”}）；
下降=真；
}
})
});
.parent{
宽度：40%；
高度：200px；
位置：相对位置；
背景色：红色；
}
.孩子{
宽度：0px；
高度：200px；
位置：绝对位置；
右：0；
排名：0；
背景色：浅绿色；
}

我希望子div向右扩展，而不是向左扩展。如前所述，将
右
更改为
左
。答案已更新。这就是您需要的吗？不完全是，现在子对象在父div中从左到右设置动画。我希望它仍然是右的，并扩展到右。欢迎使用堆栈溢出。请参阅和您的问题以包含您的代码。您可以使用编辑器工具栏上的
[]
按钮创建可运行的堆栈代码段。外部链接是可以的，但只有当相关代码也包含在这里时，因为外部链接可能会随着时间的推移而中断或更改，并且这个问题对其他用户不再有用。另外，你所问的有点不清楚-你所说的“在父母之外动画化”是什么意思？如果你不想和父母重叠，你能把他从孩子变成兄弟姐妹吗？