Question

此代码无效，我做错了什么？

TNKS。

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

将来，我会建议您解释为什么您认为“代码无效”。您需要定义代码的运行方式以及当前结果。这将帮助我让其他人更好地知道如何回答你的问题。

Answer 2

Dreas Grech的评论是正确的。您需要在调用元素之前检查该元素是否正在动画化.stop（）方法。试试这个：

function entraMouse() { jQuery(".Caja2:animated").stop();jQuery(".Caja2").fadeOut(); }
function saleMouse() {jQuery(".Caja2:animated").stop();jQuery(".Caja2").fadeIn(); }

jQuery淡出停止错误：jQuery（“。box”）。stop（）。fadeIn（）;

2 个答案: