My goal is to move an image element using the 'left' property after hiding a div.
To achieve this, I am using JQuery's '.promise()' function. Here is my code:
HTML code:
<div id="outerContainer">
<div id="left"></div>
<div id="container">
<div id="div1" class="square red"></div>
<div id="div2" class="square green">
<img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0c1d0d0ccc58dd4cfd5c3c88dc9c3cfcee0928ed0cec7">[email protected]</a>?v=73d79a89bded&a">
</div>
<div id="div3" class="square blue"></div>
</div>
<div id="right"></div>
</div>
CSS code:
#outerContainer{
display: flex;
height: 100vh;
}
#left{
display: block;
width: 20%;
border: solid 1px;
border-color: #e0e0d1;
}
... (CSS code continues)
JQuery code:
$('#left').click(function() {
$(this).hide();
});
$("#left").promise().done(function(){
$("#image").css({left: "+=" + 30});
});
After removing the 'left' element, I want to move the image an additional 30px to the right, but only after the 'left' element has been completely hidden.
The issue I'm facing is that the '.promise()' function seems to be blocking the browser and preventing the 'left' property from changing. How can I modify the 'left' property of an element after the previously removed element has been fully hidden?
Thank you in advance!