Question

我有两个相同的jsfiddles，后者用fadeIn / fadeOut代替fadeToggle。

只需快速移动和移动鼠标，并将最后一刻保留在黄色方框上等待，红色元素不会淡入。

怪异。有人对此有解释吗？

http://jsfiddle.net/q6d57/5/ （工作）

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

和

http://jsfiddle.net/q6d57/6/ （不工作）

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

Answer 1

将jquery版本更改为2.0.2

Answer 2

起初我有点困惑但是在看完fadeIn，fadeOut和＆amp; fadeToggle运行它的过程。

似乎jQuery对fadeIn的作用是检查html元素的display属性。如果display为none，则fadeIn会将display设置为block并将opacity从0漂移到1，从而淡化对象。因此，在您的代码中，当您将鼠标移开并移回时，它会停止fadeOut，但由于display仍为block，fadeIn无法生效。

但是，fadeToggle更聪明，并且只检查opacity而不只是display属性。它不仅检查opacity，而且可能保留最后一次执行淡入淡出（进出）的标记，因此它知道要执行另一个淡出淡出。

这有点传闻而没有深入研究jQuery库，但我相信这是在Chrome的优秀调试器中玩游戏后唯一可能发生的事情;）。

Answer 3

问题是您正在使用非隐藏元素的淡入/淡出。这就是为什么你需要添加.hide（）来使它工作。

检查这个小提琴：

http://jsfiddle.net/q6d57/10/

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

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

3 个答案: