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

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

Answer 3

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

相反，你不应该为隐藏的动画制作动画。

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

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

jQuery Callback表现得很奇怪

3 个答案: