I'm working on a jQuery function where I have a list of elements in a ul, some are visible and some are hidden. When a li item is clicked, I want to hide any visible elements (by sliding them to the left) and then perform another action only if the first action was completed. How can I check if the first action was performed (i.e., if an element was animated by jQuery)? Here's what my HTML code looks like:
<ul>
<li>
<div class="content_nav content_nav1">
</div>
<div class="content_el content_el1">
</div>
</li>
<li>
<div class="content_nav content_nav2">
</div>
<div class="content_el content_el2">
</div>
</li>
</ul>
And here's the jQuery code:
for (var i = 1; i < 3; i++) {
if (i != item_number) {
var another_content = ".content_el" + i;
var another_nav = ".content_nav" + i;
$(another_content).animate({'width': 'hide'}, animate_duration);
// Here I need to check if the above action was completed before proceeding with the next step
$(another_nav).animate({'width':'show'}, animate_duration);
}
}
I would really appreciate any help! Thank you in advance.
EDIT: So, the question now is: which CSS parameter does the following line modify?
$(another_content).animate({'width': 'hide'}, animate_duration);
Any insights would be helpful!