title: jQuery fadeToggle element
body: <p>I have a div that contains two <code>&lt;p&gt;</code> elements and I am trying to toggle them with a click on another div, using a fade effect (has an initial CSS <code>display:none;</code>). But when I click the trigger div, despite the effect works, during the transition, both elements are visible, so one jumps under the other one, and only when the effect finishes, the other element is removed and the new visible one goes to the correct position. Basically I want the fade in part to start only when the fading out element is no longer "using space", so it fades in in the same place the other was. How can I solve that? </p>
  
  <p>Here's my code:</p>
  
  <p>JS:</p>
  
  <pre><code>$("span#contagem-fotos").click(function() {
      $("div.info-foto p").fadeToggle();
  });
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>ul#listagem-fotos li div.info-foto {
      padding:7px;
      height:14px;
      background-color:#300;
      position:relative;
  }
  
  ul#listagem-fotos li div.info-foto p.texto-ficheiro {
      font-size:0.80em;
      text-align:left;
      display:none;
  }
  
  ul#listagem-fotos li div.info-foto p.texto-numero {
      font-size:1em;
      text-align:center;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="info-foto"&gt;
      &lt;p class="texto-numero"&gt;&lt;?php echo sprintf("%04d", $db-&gt;SeekPosition()); ?&gt;&lt;/p&gt;
      &lt;p class="texto-ficheiro"&gt;&lt;?php echo $row-&gt;filename; ?&gt;&lt;/p&gt;
      &lt;div data-imageid="&lt;?php echo $row-&gt;image_id; ?&gt;" class="fav-icon &lt;?php echo $fav_class; ?&gt;" title="Adicionar/remover favorito"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>