Question

Disclaimer: I’m relatively new to jQuery and JavaScript. The openStatement() function below executes whenever it is determined that the #statementTab is not already open. If the code below isn’t enough information, simply check out the source below.

Basically, the UL containing the various tabs flickers and disappears whenever the user opens the #statementTab. I’d like to fix this.

Source: http://www.cameronhermens.com/dbunkr/brochure.html

// The openStatement function opens the statement tab when the user clicks 
<a id="openIt"> (if the statement tab isn't already open).

function openStatement() {
    $('#explore').animate({width: '70%'}, '200');
    $('#statementTab').animate({width: '213px'}, '1000');
};

// Here's the DIV.
<div id="explore" class="brochure">
  <ul id="brochureTab">
    <li><a href="welcome.html" >welcome</a></li>
    <li><a href="ourMission.html">our mission</a></li>
    <li><a href="whatIsdBunkr.html">what is dBunkr</a></li>
  </ul>
</div>

<div id="statementTab">
  <a id="openIt">
    <img class="opaque left-5" src="images/rightArrow.jpg" height="10" width="6" alt="Expand the Statement tab">
    <span class="statementBar">Statements</span>
  </a>
</div>

Answer 1

The UL#brochureTab is being hidden during animation because as #explore is animating, the jQuery is applying a style of overflow: hidden to it. This style is then removed upon completion of the animation.

A quick solution (i.e. without addressing the way that you have styled the rest of your elements) would be to add the style overflow: visible !important; to #explore.