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

why does it not work if I replace fadeIn/fadeOut with fadeToggle

本文关键字：fadeOut 为什么 不起作用 fadeIn fadeTogle 替换 如果      更新时间：2023-12-09

我有两个相同的jsfiddle，后者被fadeIn/fadeOut代替，而不是fadeTogle。

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

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

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);
  });
});

将jquery版本更改为2.0.2

一开始我有点困惑，但在观看fadeIn、fadeOut和&fadeToggle顺其自然。

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

然而，fadeToggle稍微聪明一点，检查opacity，而不仅仅是display属性。它不仅检查opacity，而且可能保留最后一次执行淡入或淡出的标志，这样它就知道要执行另一个。

如果不深入研究jQuery库，这只是道听途说，但我相信这是在Chrome出色的调试器中玩过之后可能发生的唯一事情；）。

问题是您使用的fadeIn/Out带有非隐藏元素。这就是为什么你需要添加.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);
  });
});
相关文章：