Question

I am trying to do something that should be really simple but I am apparently not doing it in the best way.

I am basically just trying to fade some elements out and then fade another group in based on which link was clicked.

Here is the fiddle: http://jsfiddle.net/redenvy/sTzna/1/ make sure to select jQuery

As you can see the elements run into each other and then the content seems to fade in and out an extra time.

Any help is appreciated!

HTML:

<div class="row module-intro main">
    <a href="#" id="new">New</a>
</div>

<div class="row module-intro new hidden">
    <a href="#" id="main">Cancel</a>
</div>

<div class="row main">
    <p>MAIN CONTENT</p>
</div>

<div class="row new hidden">
    <p>NEW CONTENT</p>
</div>

CSS:

 .hidden {
    display:none;
}

JavaScript:

$(document).ready(function() {
  $('.module-intro a').click(function(){
    var id = $(this).attr('id');
    $('.row').fadeOut(600,function(){
      $('.row.'+id).fadeIn(800);
    });
  });
});

Answer 1

You are animating all of the .row elements to begin with, not just the currently shown ones. You should switch to this:

$(document).ready(function() {
  $('.module-intro a').click(function(){
    var id = $(this).attr('id');
      $('.row:visible').fadeOut(600,function(){
      $('.row.'+id).fadeIn(800);
    });
  });
});