FireFox 6.0 中的 jQuery .fadeOut 问题答案

【问题标题】：jQuery .fadeOut problems in FireFox 6.0FireFox 6.0 中的 jQuery .fadeOut 问题
【发布时间】：2011-10-29 10:23:02
【问题描述】：

到目前为止，我的fadeIn 工作正常，但fadeOut 还不太正确。现在，只要鼠标离开悬停区域，看起来就不会发生任何fadeOut。我希望在下一个动画（下一个fadeIn）开始之前完成平滑的淡出，并且不会排队。基本上这是通过<span> 标签内的一些链接。我现在正处于最后阶段！

附：我知道我没有使用.hover。我现在宁愿坚持使用mouseover 和mouseleave，甚至是mouseout。请满足这个小小的要求。

<script>
    $("a").mouseover(function () { 
        $("div").fadeIn(0, function () { 
            $("span").fadeIn(3000,0.0);
        }); 
        return false; 
    });  

    $dequeue;

    $("a").mouseleave(function () { 
        $("span").fadeOut(3000,0.0);
    });
</script>


<!DOCTYPE html>


<html>
<head>
<script type="text/javascript" src="jQuery.js"></script>
</head>
<body>

<a href="#">MouseOver!</a>

<div>

<h3><span>Sample Text</span></h3>

</div>
</body>
</html>

编辑：2011 年 8 月 18 日

我意识到可能存在与上述脚本冲突的脚本。我在同一页面上运行了一个额外的 jquery 脚本。它本身可以正常工作，但是当我为文本框（上方）添加脚本时，图像和文本上的 .fadeOut 都会被忽略或至少不一致。

第二个 jQuery 脚本：

<script>
$(document).ready(function(){

$(".latest_img").fadeTo("slow", 0.0);
$(".latest_img").hover(function(){
$(this).fadeTo(1000, 1.0).dequeue();

},function(){
$(this).fadeTo(1000, 0.0).dequeue();
});
});
</script>

以下是应提示显示文本和图像的四个“目标”之一的示例（有四个文本框伴随四个图像 - 每个通过鼠标悬停在目标上显示）。

HTML：

<div class="gallerycontainer">
<div width="100%" height="30%">

<a class="thumbnail" href="#thumb"><h2 class="ftb" id="tg1">Target A</h2>

<span class="txspan">
<img src="img/ima.jpg" class="latest_img" id="images" />
<h3 class="text"><br>Textbox content for Target A</h3></span></a>

</div>
</div>

【问题讨论】：

什么是$dequeue； ?如果它没有定义，你可能会让你的 js 坏掉。
@Fresheyeball 来自这里api.jquery.com/jQuery.dequeue 我想我用错了。

标签： jquery hover mouseout mouseleave

【解决方案1】：

没有$dequeue，这两个事件似乎都在工作

http://jsfiddle.net/pxfunc/y9qd6/

$("a").mouseover(function() {
    $("div").fadeIn(0, function() {
        $("span").fadeIn(3000, 0.0);
    });
    return false;
});

// remove $dequeue

$("a").mouseleave(function() {
    $("span").fadeOut(3000, 0.0);
});

编辑：

http://jsfiddle.net/pxfunc/y9qd6/

var $a = $('a'),
    $div = $('div'),
    $span = $('span');

$a.mouseover(function() {
    $div.show();
    $span.fadeIn(1000);
}).mouseleave(function() {
    $span.stop(true, true).fadeOut(1000);
});

这应该像您正在寻找的那样工作，span 在淡入之前完全淡出。

【讨论】：

是的。它似乎在我的示例中有效，但在我的页面上不起作用。 :( dequeue 应该将动画从队列中取出，这样动画就不会堆积起来。由于它不适用于我的进出，它还没有解决我的问题。
@Scott，你可以在调用淡入淡出方法之前.stop()淡入淡出动画，这样它们就不会像$('span').stop(true, true).fadeIn(3000, 0.0);那样堆叠东西
.stop 不会突然停止动画而不让它完成吗？这就是淡出似乎正在发生的事情。
该示例确实会突然停止任何当前动画，但您可以控制它，您可以使用您认为合适的参数调用.stop([clearQueue], [jumpToEnd]) 方法，默认值为false。听起来你可能想要.stop(true, false)
当我添加 .stop() 时根本没有动画。

【解决方案2】：

您不必使用dequeue。请改用stop()：

$("a").mouseover(function () { 
    $("div").fadeIn(0, function () { 
        $("span").fadeIn(3000,0.0);
    }); 
});  

// using ".stop()" will stop the previous animation, and immediatly fade it out

$("a").mouseleave(function () { 
    $("span").stop().fadeOut(3000,0.0);
});

【讨论】：

谢谢，但它并没有解决问题。我尝试了许多修复方法，包括添加背景颜色和使用fadeTo 代替fadeIn 和fadeOut。到目前为止，没有任何效果。
那么我不确定我是否完全理解您要完成的工作。你能试着解释清楚一点吗？

【解决方案3】：

将所有内容放在文档就绪事件中
删除 $dequeue。
在fadeIn和fadeOut之前添加stop(true, true)

$(document).ready(function() {
  $("a").mouseover(function () { 
      $("div").stop(true, true).fadeIn(0, function () { 
          $("span").fadeIn(3000,0.0);
      }); 
      return false; 
  });  

  //$dequeue;

  $("a").mouseleave(function () { 
      $("span").stop(true, true).fadeOut(3000,0.0);
  });
});

【讨论】：

顺便说一句，您可能需要考虑使用 mouseenter 和 mouseleave ，以便事件只触发一次 - 当光标进入锚点时......并离开它。
我在上面有一个先前的 jQuery 语句，虽然在单独的 SCRIPT 标记中。当我使用 document.ready 语句时，这个动画没有运行，所以我把它拿出来了。
是的，我目前正在使用 mouseenter 和 mouseleave。我一定是从之前的迭代中提取了这个例子。不过，其他一切都是一样的。
尝试使用更正的语法重新准备好文档。它应该工作。另外，您是否打算在 3 秒内实际播放动画？似乎很慢......但这只是我。我宁愿在淡入和淡出动画中传递“快速”作为持续时间。

【解决方案4】：

$dequeue 是错误的语法。它需要是 $.dequeue 并被传递一个元素，即 $.dequeue(elem)。此外，您没有使用队列语句，因此出队是不合适的。 stop() 在两个淡入淡出上都是明智的。无需将任何参数传递给 stop() 默认应该可以正常工作。

【讨论】：