Question

I’m trying to make a simple “Click on Div -> Hide DIV -> Show another DIV” process and for some weird reason the .animate function doesn’t work properly.

    jQuery("#main").animate({
    height: "0px"
  }, 1200 );

The animation duration time is determining the time of the div being hidden here (have no idea why) means if i leave it on 1 second the div will get back to his visible state after 1 second, it doesn’t hide it for mote than the determined animation duration and then it gets back to the original state.

Here is the div structure:

HTML:

<div id="container">
<div id="main">

<div class="block1">
<div class="icon"></div>
<div class="shadow"></div>
<div class="text"></div>
</div>

<div class="block2">
<div class="icon"></div>
<div class="shadow"></div>
<div class="text"></div>
</div>

<div class="block3">
<div class="icon"></div>
<div class="shadow"></div>
<div class="text"></div>
</div>

<div class="block4">
<div class="icon"></div>
<div class="shadow"></div>
<div class="text"></div>
</div>

<div class="center_orb"></div>
</div>

CSS:

#container {
    position:relative;
    margin: 0 0 0 4px;
    padding: 0 0 0 0;
    width:1150px;
    height: 590px;
}

#main {
    position:relative;
    height: 590px;
}

.block1 {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 563px;
    height: 282px;
    background:url(../../images/tuts_block.png);
    cursor: pointer;
}

.block1:hover {
    background-position: 0px 282px;
}

.block1 .icon {
    background:url(../../images/tuts_iconUsage.png);
    position:absolute;
    top: 35px;
    left: 50%;
    margin-left: -70px;
    width: 141px;
    height: 159px;
}

.block1 .text {
    background:url(../../images/tuts_textUsage.png);
    position:absolute;
    top: 235px;
    left: 50%;
    margin-left: -124px;
    width: 248px;
    height: 33px;
}

(The other CSS classes are the same like .block1 just with a diff name and position.

Any help?

Answer 1

I see the problem now. Your elements are absolutely positioned which causes your issue.

The red border here is #main

http://jsfiddle.net/6hXDB/1/

This happens because jQuery sets overflow-y and overflow-x to hidden while animating. So your absolutely positioned elements are ‘hidden’ during the animation, but then are reshown at the end of the animation once these properties are removed.

In the callback to the animation I would set everything inside #main to hidden.

http://jsfiddle.net/6hXDB/2/