jQuery Slide toggle and fade in issue

Question

As you can see when clicking on a number, the title fades in alright but the text just appears below instead of sliding into place. When closing however, the text slides back perfectly. I understand this may be a weird technicality due to the fade in and slide toggle being related.

JQUERY

$(document).ready(function(){
$(".revealHeader").click(function(){
      $(".revealTitle", this).fadeIn("fast");
      $(this).nextAll(".revealText").first().slideToggle();
});
});

HTML

<div id="reveal">
<span class="revealHeader">10. <span class="revealTitle">EXAMPLE</span></span>
<span class="revealText"><img src="EXAMPLE.JPG" /></span>

Please be aware I am terrible with jQuery as I stupidly never bothered to learn it properly. (Feel free to tear apart my code.)

Answer 1

try this... This will execute the slide AFTER the fade is finished.

  $(".revealTitle", this).fadeIn("fast", function(){
      $(this).nextAll(".revealText").first().slideToggle();
  });

if you really want them both done at the same time, I think you will need to split the content into 2 containers. One for fading and one for scrolling.