Menu
I want to animate the width of the child div to break out of the parent div. In my code which I am linking the child, div animates inside of the parent div but not outside of it.
Please help. 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>
790
asked Nov 25 '25 10:11
When you say you want the child to animate outside the parent to the right, I assume you mean for it to slide out of the parent element.
You are already setting the width in your jQuery, so you just need to set the right to a negative number to make it extend the opposite direction, e.g.:
$(".child").animate({width: "200px", right: "-200px" });
Then to reset it, just set right:0, e.g.
$(".child").animate({width: "0px", right:"0"});
Working Snippet:
$(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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
