javascript - jQuery 淡入淡出停止错误 : jQuery (".box"). stop().fadeIn();

Question

这段代码不起作用，我做错了什么？

天哪。

 var x;
    x=jQuery(document);
    x.ready(inicializarEventos);

    function inicializarEventos()
    {
      var x;
      x=jQuery(".Caja2");
      x.hover(entraMouse,saleMouse);
    }


    function entraMouse()
    {
      jQuery(".Caja2").stop().fadeOut();
    }

    function saleMouse()
    {
      jQuery(".Caja2").stop().fadeIn();
    }

Answer 1

(对我来说)您似乎希望有一个框，当鼠标位于其上方时，该框会淡出，而当鼠标移开时，该框会重新出现。这实际上比最初看起来要棘手。

当您调用 $().fadeOut() 时，会发生 jQuery 为淡入淡出设置动画，然后在该元素上设置 display: none 。因为该元素随后从显示列表中删除，所以将触发 mouseOut 事件，这当然会开始 fadeIn() 效果。只要鼠标悬停在该区域，就会导致 mouseIn 和 mouseOut 事件无限循环。

您可能想尝试使用 $().fadeTo() 方法。在以下示例中，我将鼠标进入时将 opacity 属性设置为 0.0，并在鼠标离开时将其设置回 1.0。由于该元素从未真正隐藏(只是不可见)，因此 mouseOut 事件能够正确触发。

jQuery(document).ready(inicializarEventos);

function inicializarEventos() {
    $(".Caja2").hover(entraMouse, saleMouse);        
}

function entraMouse() {
    jQuery(this).fadeTo("slow", 0.0)
}

function saleMouse() {
    jQuery(this).fadeTo("slow", 1.0)
}

将来，我建议解释为什么您认为“代码不起作用”。您需要定义您期望代码如何运行以及当前结果是什么。这将帮助我和其他人更好地知道如何回答您的问题。