jQuery Callback действует странно

Question

Я пытаюсь сделать что-то, что должно быть действительно простым, но, очевидно, я делаю это не лучшим образом.

Я просто пытаюсь постепенно исчезнуть с некоторых элементов, а затем исчезнуть с другой группой, в зависимости от того, по какой ссылке щелкнули.

Вот скрипка: http://jsfiddle.net/redenvy/sTzna/1/ обязательно выберите jQuery

Как вы можете видеть, элементы сталкиваются друг с другом, а затем содержимое, по-видимому, постепенно исчезает.

Любая помощь приветствуется!

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

Вы анимируете все элементы .row для начала, а не только отображаемые в данный момент. Вы должны переключиться на это:

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

Answer 2

Это потому, что вы затухаете всех .row элементов, один из которых уже скрыт, и поэтому обратный вызов запускается для этого преждевременно.

Вместо этого вы не должны анимировать скрытое.

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

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

Answer 3

Вы тоже исчезаете в скрытых div, поэтому попробуйте this