jQuery回调行为怪异

我试图做一些应该非常简单的事情，但我显然没有用最好的方式去做

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

关键是：确保选择jQuery

正如您所看到的，这些元素相互碰撞，然后内容似乎在一段额外的时间内淡入淡出

感谢您的帮助

HTML:

JavaScript:

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

---

您正在为所有要开始的

.row

元素设置动画，而不仅仅是当前显示的元素。您应该切换到以下位置：

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

---

您正在为所有要开始的

.row

元素设置动画，而不仅仅是当前显示的元素。您应该切换到以下位置：

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

---

你也在隐藏div中淡出，这就是为什么你也在隐藏div中淡出的原因，这就是为什么你也在隐藏div中淡出的原因，这是因为你淡出了所有的

.row

元素，其中一个元素已经被隐藏，因此，对该元素的回调被提前触发

相反，不应设置隐藏对象的动画

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

---

这是因为您正在淡出所有

.row

元素，其中一个元素已经隐藏，因此会提前为该元素触发回调

相反，不应设置隐藏对象的动画

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