Add delay between sliding divs in jquery

I am thinking to add a delay, but I could be wrong. Maybe there is another solution.

Here is a new updated fiddle. I have the slide direction correct now. Now the slide doesn’t look so good. When the colored box slides out to the left, it reveals the gray main menu box. I need it NOT to reveal the gray box but to have the gray box slide in. Maybe it is a problem with the timing. There might need to be a delay before the gray box slides in to make it look good. The gray box text should have space between the text and the edge of the colored box when sliding. http://jsfiddle.net/L7v0w96s/33/

<div class="main-menu"><a href="#target0" class="panel main">Main Menu Link</a>
</div> 
<div id="right" id="main">
<div id="target0" class="panel active">This is the Target Menu<br />
    <a href="#target1" class="panel">Target 1</a><br/>
    <a href="#target2" class="panel">Target 2</a><br/>
    <a href="#target3" class="panel">Target 3</a><br/>
</div>
<div class="panel" id="target1" style="background:green">Target 1</div>
<div class="panel" id="target2" style="background:red">Target 2</div>
<div class="panel" id="target3" style="background:yellow">Target 3</div>
</div>


Source: html

Leave a Reply