jQuery Callback Acting Weird

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&g开发者_运维百科t;

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);
    });
  });
});

---

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);
    });
  });
});

---

You're fading in hidden div's too, that's why try this

---

This is because you're fading out all .row elements, of which one is already hidden, and as such the callback is fired for that one prematurely.

Instead, you should not animate the hidden one.

$('.row:not(.' + id + ')').fadeOut(600, function() {
// ...

http://jsfiddle.net/sTzna/14/