繁体   English   中英

jQuery的fadeIn和fadeOut问题,将鼠标悬停在div上

[英]Jquery fadeIn And fadeOut problem using hover over a div

我有以下代码:

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

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


function entraMouse()
{
    jQuery(this).fadeOut();
}

function saleMouse()
{
    jQuery(this).fadeIn();
}

问题是,当我将鼠标移到该框上时,它会不断淡入和淡出,直到停止鼠标移动为止。

另一个不好的行为是,如果我将鼠标移入和移出盒子的速度比淡入淡出速度快几倍,它会不断重复执行效果。

我需要一些可以在鼠标移到框上时停止动画的方法。

关于第二个问题:

如果在将鼠标移到框上时动画正在“建立”,则可以通过先调用stop()来解决此问题。 像这样:

jQuery(this).stop().fadeOut();


jQuery(this).stop().fadeIn();

当您调用fadeOut()时,它将最终使该项目完全不可见,这可能会触发mouseOut事件。

也许您可以使用一个非常低的数字使用fadeTo()方法,因此它不会消失:

function entraMouse()
{
    jQuery(this).fadeTo("fast",0.01);
}

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

也许您可以拥有一个布尔变量,比如说它是“ is_faded_out”,并相应地将其设置为true或false?

多数民众赞成在可能是由于冒泡的影响,可以说您有一个div,其中包含一些内容:

<div> <span>你好</ span> <p>世界</ p> </ div>

然后,Hello跨度的悬停事件以及div悬停的事件侦听器中将捕获World paragrapgh。

我遇到了类似的问题,并通过以下方法解决了该问题:

function entraMouse()
{
    if (!jQuery(this).is(':hidden')) jQuery(this).fadeOut();
}

function saleMouse()
{
    if (jQuery(this).is(':hidden')) jQuery(this).fadeIn();
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM