Fade-based jQuery navigation - only works once for some reason

Hi guys,

I’m using a simple function to fade between five divs based on clicking five corresponding divs. It works beautifully once - when I click one of the five navigation divs, the current content div fades out and the selected div fades right in. However, when clicking again, the current content div fades out and nothing fades back in. Seems that all five of the content divs end up with display set to none and won’t fade back in. Any ideas would be greatly appreciated!

Site is at http://www.jvacampaigns.com/phoenix/#portfolio

Code below.

<script type="text/javascript">
      $(document).ready(function() {
            $(".owl-carousel:not(#createHeroes) *").css("display", "none");
            $( ".navlink" ).click(function() {
                  var carouselName = $(this).attr('title');
                  $( ".owl-carousel:not(#"+carouselName+")" ).fadeOut(function(){$("#"+carouselName+" *").fadeIn();});
            });
      });
</script>
<div class="navlink" title="createHeroes">CREATE HEROES</div>
<div class="navlink" title="paintVillains">PAINT VILLAINS</div>
<div class="navlink" title="tellAStory">TELL A STORY</div>
<div class="navlink" title="playCourtJester">PLAY COURT JESTER</div>
<div class="navlink" title="mobilizeThePeople">MOBILIZE THE PEOPLE</div>
<div class="owl-carousel" id="createHeroes">
      Content
</div>
<div class="owl-carousel" id="paintVillains">
      Content
</div>
<div class="owl-carousel" id="tellAStory">
      Content
</div>
<div class="owl-carousel" id="playCourtJester">
      Content
</div>
<div class="owl-carousel" id="mobilizeThePeople">
      Content
</div>