jquery 如何在父 div 的右侧为子 div 设置动画？
Posted
技术标签:
【中文标题】jquery 如何在父 div 的右侧为子 div 设置动画？【英文标题】：jquery how can i animate a child div to the right out of the parent div? 【发布时间】：2020-12-27 08:27:33 【问题描述】：我想为子 div 的宽度设置动画以脱离父 div。 在我链接孩子的代码中，div 在父 div 内部而不是在其外部进行动画处理。
请帮忙。 jsfiddle
$(document).ready(() =>
drop = false;
$(".parent").click(() =>
if (drop == true)
$(".child").animate(
width: "0px"
);
drop = false;
else if (drop == false)
$(".child").animate(
width: "200px"
);
drop = true;
)
);.parent
width: 40%;
height: 200px;
position: relative;
background-color: red;
.child
width: 0px;
height: 200px;
position: absolute;
right: 0;
top: 0;
background-color: aqua;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<div class="child">
</div>
</div>【问题讨论】：
欢迎来到 Stack Overflow。请参阅 How to Ask 和 edit 您的问题以包含您的代码。您可以使用编辑器工具栏上的[<>] 按钮创建可运行的堆栈片段。外部链接是可以的，但仅当相关代码也包含在此处时，因为外部链接可能会随着时间的推移而中断或更改，并且该问题对其他用户不再有用。另外，您要问的有点不清楚-“在父母之外制作动画”是什么意思？如果你不想重叠父母，你能不能把它从孩子改成兄弟姐妹？
【参考方案1】：
当您说您希望孩子在右侧的父元素之外进行动画处理时，我假设您的意思是让它滑出父元素。
您已经在 jQuery 中设置了宽度，因此您只需将 right 设置为负数即可使其向相反方向延伸，例如：
$(".child").animate(width: "200px", right: "-200px" );
然后重置它，只需设置right:0，例如
$(".child").animate(width: "0px", right:"0");
工作片段：
$(document).ready(()=>
drop = false;
$(".parent").click(()=>
if(drop == true)
$(".child").animate(width: "0px", right:"0");
drop = false;
else if(drop == false)
$(".child").animate(width: "200px", right: "-200px" );
drop = true;
)
);.parent
width: 40%;
height: 200px;
position: relative;
background-color: red;
.child
width: 0px;
height: 200px;
position: absolute;
right: 0;
top: 0;
background-color: aqua;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>【讨论】：
【参考方案2】：您可以将宽度更改为例如 400 像素，它将扩展为 400 像素。可以用 100% 匹配红框，也可以用 150% 比红框多 50%。
如果要向右增长，请将.childright: 0的css更改为left: 0。
$(document).ready(() =>
drop = false;
$(".parent").click(() =>
if (drop == true)
$(".child").animate(
width: "0px"
);
drop = false;
else if (drop == false)
$(".child").animate(
width: "400px"
);
drop = true;
)
);.parent
width: 40%;
height: 200px;
position: relative;
background-color: red;
.child
width: 0px;
height: 200px;
position: absolute;
left: 0;
top: 0;
background-color: aqua;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<div class="child">
</div>
</div>【讨论】：
我希望子 div 向右而不是向左扩展。 如前所述，将right 更改为left。答案已更新。这是你需要的吗？
不完全是，现在孩子在父 div 内从左到右进行动画处理。我希望它仍然正确并向右扩展。以上是关于jquery 如何在父 div 的右侧为子 div 设置动画？的主要内容，如果未能解决你的问题，请参考以下文章
如何根据自己的宽度而不是父 div 将 CSS 边距/填充设置为子 div？