0

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

坦克。

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

2 回答 2

4

看起来（对我来说）你想要一个盒子，当鼠标放在它上面时会淡出，当鼠标移开时会重新出现。这实际上比最初看起来更棘手。

当您调用$().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)
}

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

于 2009-07-16T22:20:01.347 回答
1

评论中的 Dreas Grech 是正确的。在调用 .stop() 方法之前，您需要检查元素是否正在动画。尝试这个：

function entraMouse() { jQuery(".Caja2:animated").stop();jQuery(".Caja2").fadeOut(); }
function saleMouse() {jQuery(".Caja2:animated").stop();jQuery(".Caja2").fadeIn(); }
于 2009-07-16T21:55:35.683 回答