I have been attempting to add animation to a DIV element by using jQuery. The goal is to move the DIV from the center to the left when it is clicked, but I am encountering some issues. The parent div has a position of "relative", and my initial idea was to change its position to "absolute" upon click, and then execute the animate function. However, this approach is not working as expected; instead of animating, the DIV simply shifts from the center to the left instantaneously.
Here is the code snippet I'm currently working with:
$("#bx1 > .column-wrapper-inner > a ").click(function(){
$(".custom-col-md-2").css({position: "absolute"});
$(".column-wrapper").css({position: "absolute"}).animate({left: '50px'}, "slow");
});
Please note: I want the transition from relative to absolute positioning to occur only upon click, rather than being the default behavior. By default, the elements are organized in a grid layout.
If anyone could provide assistance or advice on how to resolve this issue, it would be greatly appreciated!
UPDATE: You can also find the updated code on JsFiddle.
Thank you in advance for your help.