It's a bit tricky to explain, but essentially I have two divs and when I click the button, instead of moving the elements, I want to change the width of their parent containers to prevent any overlapping.
Interestingly, the one on the right edge of the screen behaves as expected, giving the illusion that the inside element is going out of the screen.
The same effect doesn't work on the left side. Even when I tested changing the inner element to absolute positioning.
In simple terms, when I click Run, I expect the text on the left side to be gradually pushed off the screen as the parent container's width decreases.
This is what I am aiming for:
$("#run").on("click", function() {
$("#cont-left, #cont-right").toggleClass("hide");
});#cont-right {
position: absolute;
top: 0px;
right: 0px;
width: 200px;
overflow: hidden;
border: 2px solid blue;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
#test {
background: yellow;
left: 0px;
}
#cont-left {
position: absolute;
top: 0px;
height: 30px;
left: 0px;
width: 200px;
overflow: hidden;
border: 2px solid green;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
#test2 {
background: pink;
right: 0px;
}
#run {
display: block;
width: 100px;
background: red;
cursor: pointer;
margin: 0 auto;
color: white;
padding: 10px 0px;
text-align: center;
font-weight: bold;
}
#run:hover {
background: green;
}
#cont-right.hide,
#cont-left.hide {
width: 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cont-right" class="hide">
<div id="test">
111<br />222<br />333
</div>
</div>
<div id="cont-left" class="hide">
<div id="test2">
111<br/>222<br />333
</div>
</div>
<span id="run">Run</span>