Question

所以我试图用一些javascript做一些简单的fadeIn / fadeOut动画的一些文本div。虽然我确信可能有更好的方法来编写我的函数，但它们目前正在工作，但是我想修复一个小问题而不确定最佳方法。

$('#portfolio-link').click(function(){
   $( "#resume" ).fadeOut(500);
   $( "#profile" ).fadeOut(500);
   $( "#contact" ).fadeOut(500);
   setTimeout(function(){$( "#portfolio" ).fadeIn(500);},500);
}); 

$('#resume-link').click(function(){
   $( "#portfolio" ).fadeOut(500);
   $( "#profile" ).fadeOut(500);
   $( "#contact" ).fadeOut(500);
   setTimeout(function(){$( "#resume" ).fadeIn(500);},500);
}); 

$('#profile-link').click(function(){
   $( "#portfolio" ).fadeOut(500);
   $( "#resume" ).fadeOut(500);
   $( "#contact" ).fadeOut(500);
   setTimeout(function(){$( "#profile" ).fadeIn(500);},500);
}); 

$('#contact-link').click(function(){
   $( "#portfolio" ).fadeOut(500);
   $( "#resume" ).fadeOut(500);
   $( "#profile" ).fadeOut(500);
   setTimeout(function(){$( "#contact" ).fadeIn(500);},500);
});

只是解释一下代码; ＃portfolio-link，＃resume-link等是我的导航链接。单击这些时，我希望它们淡出当前显示的文本div（＃portfolio，＃resume等），并将其替换为新div（例如，如果我单击组合导航链接，我想淡出其他3并淡化了组合文本div。

我遇到的问题有时会有多个div显示你是否太快点击导航链接因为另一个功能在新的启动之前还没有完成所以我只是想知道修复这个的最佳方法是什么会的。

也许在函数开头将某种变量设置为1，在完成时将其设置为0，然后在允许新函数开始之前检查值为0？如果这是一个很好的方法，它会在函数之间产生延迟（留下很多延迟衰落的可能性）或者只是不点击一下吗？

对此有任何帮助表示赞赏，因为我最好使用javascript / jquery。

由于

Answer 1

你应该使用.finish（）jquery函数，它相当于.stop（true，true）。这将确保对象上的所有先前动画完成并且它处于最终位置。我将向您展示其中一个的代码，这将适用于所有其他元素。

$('#portfolio-link').click(function(){
   $( "#resume" ).finish().fadeOut(500);
   $( "#profile" ).finish().fadeOut(500);
   $( "#contact" ).finish().fadeOut(500);
   setTimeout(function(){$( "#portfolio" ).fadeIn(500);},500);
});

<强>更新

实现这一目标的最简单方法是为所有元素（联系人，个人资料，简历，投资组合）添加一个类，让我们称之为div_content类，然后使用：

$('#portfolio-link').click(function(){
   $( ".div_content" ).finish().fadeOut(500).promise().done(function(){$("#portfolio").fadeIn(500)});
});

Updated fiddle

Answer 2

fadeOut jquery函数接受第二个参数，它是一个在完成时运行的函数，所以：

   $('#portfolio-link').click(function(){
   $( "#resume" ).fadeOut(500);
   $( "#profile" ).fadeOut(500);
   $( "#contact" ).fadeOut(500, function() {
       $( "#portfolio" ).fadeIn(500)
   });

jQuery / Javascript函数延迟运行，直到另一个函数完成（如果需要）

2 个答案: