CODEWITHSUNDEEP
jquery
Tony
Tony

Reputation: 12695

jquery animate and hide element under another element

I have problem with the following scenario.

I have 2 divs (it's an example, see the picture) When I click on the yellow div, it's being animated and moved to the left to be completely hidden under the red div.

I know I must use $.animate() function to make the yellow div movement, but how to hide it under the red div ?

enter image description here

Upvotes: 0

Views: 103

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337550

z-index is what you need, however you need to ensure that your elements are set correctly with regard to the position of parents. Try this:

<div id="container">
    <div id="centre"></div>
    <div id="left"></div>
    <div id="right"></div>
</div>

#container {
    position: relative;
}
#left {
    position: relative;
    z-index: 20;
}
#right {
    z-index: 10;
}
#centre {
    position: absolute;
    z-index: 15;
}

Note, I've reduced the CSS here to the important attributes. The full version is in the fiddle.

$('#centre').click(function() {
    var $el = $(this);
    $el.animate({ left: "-=" + $el.width() });
});

Example fiddle

Upvotes: 1

Related Questions