jQuery 回调行为怪异答案

【问题标题】：jQuery Callback Acting WeirdjQuery 回调行为怪异
【发布时间】：2011-08-31 17:34:27
【问题描述】：

我正在尝试做一些应该非常简单的事情，但我显然没有以最好的方式做到这一点。

我基本上只是试图淡出一些元素，然后根据点击的链接淡入另一个组。

这里是小提琴：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);
    });
  });
});

【问题讨论】：

标签： jquery callback fadein

【解决方案1】：

您首先要为所有.row 元素设置动画，而不仅仅是当前显示的元素。你应该切换到这个：

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

【讨论】：

【解决方案2】：

你也在隐藏的 div 中消失，这就是为什么尝试this

【讨论】：

【解决方案3】：

这是因为您正在淡出所有 .row 元素，其中一个已被隐藏，因此过早地触发了该回调。

相反，您不应该为隐藏的设置动画。

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

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

【讨论】：