Javascript 如果用fadeToggle替换fadeIn/fadeOut，为什么不起作用

我有两个相同的jsfiddle，后者由fadeIn/fadeOut代替，而不是fadeToggle

只需快速移动鼠标，将最后一刻放在黄色框上等待，红色元素不会消失。

奇怪。有人对此有解释吗

（工作）

及

（不工作）

---

一开始我有点困惑，但在观看

fadeIn

，

fadeOut

，&

fadeToggle

运行它的过程时，在chrome调试器中玩了一下，我想大胆地猜测一下这一点

jQuery对

fadeIn

的作用似乎是检查html元素的

display

属性。如果

显示

为

无

，

fadeIn

通过将

显示

设置为

块

并将

不透明度

从0漂移到1来淡入对象。因此，在您的代码中，当您来回移动鼠标时，它会停止

淡出

，但由于

显示

仍然是

块

，

淡出

无法生效

但是，

fadeToggle

更聪明了一点，检查

opacity

而不仅仅是

display

属性。它不仅要检查不透明度，而且可能会保留一个上次执行淡入淡出的标志（in或out），以便知道如何执行另一个

---

在没有深入jQuery库的情况下，这只是一点传闻，但我相信这是在Chrome很棒的调试器中玩过之后可能发生的唯一事情；）

问题在于，您正在对非隐藏元素使用fadeIn/Out。 这就是为什么需要添加.hide（）以使其正常工作

检查这把小提琴：

---

将jquery版本更改为2.0.2

在Win7上使用Chrome时，两个小提琴都可以正常工作。。。假设发生了什么和实际发生了什么？@thenewseatle-在源代码中，这些方法似乎调用了相同的函数

.animate（道具、速度、放松、回调）这很奇怪。。。它似乎也在与fadeTo一起工作，我认为除非有人能深入了解源代码，否则你不会得到一个明确的答案，但在
fade***
animation方法如何与stop（）一起工作方面确实存在细微的差异，我认为这只是一些bug，也许提交一份bug报告会给你一个答案。如果你将jquery版本改为2.0.2，是我还是它看起来有效？我相信我的答案是正确的——但是jquery在2.0.2中变得更聪明了。接得好！
$(document).ready(function(){
      $(".box1").mouseenter(function(){
        $('.box2').stop(true, false).fadeToggle(1500);
      });
      $(".box1").mouseleave(function(){
        $('.box2').stop(true, false).fadeToggle(1500);
      });
    });

$(document).ready(function(){
  $(".box1").mouseenter(function(){
    $('.box2').stop(true, false).fadeIn(3000);
  });
  $(".box1").mouseleave(function(){
    $('.box2').stop(true, false).fadeOut(3000);
  });
});

$(document).ready(function(){
  $(".box1").mouseenter(function(){
    $('.box2').stop(true, false).hide().fadeIn(3000);
  });
  $(".box1").mouseleave(function(){
    $('.box2').stop(true, false).hide().fadeOut(3000);
  });
});