I have this code:
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();
}
The problem is that when I move the mouse over the box it starts fade In and Fade Out constantly until stope the mouse move.
Other bad behevior is thar if I move the mouse in and out the box several times faster than the fade, it keep doing the efect over and over.
I need something that stop the animation when the mouse go back over the box.
On the second issue:
If your animations are "building up" as you run the mouse over the box, you can fix that by calling stop() first. Like so:
jQuery(this).stop().fadeOut();
jQuery(this).stop().fadeIn();
When you call fadeOut(), it will eventually make the item completely invisible, which probably triggers the mouseOut event.
Maybe you can use the fadeTo() method with a very low number, so it will not disappear:
function entraMouse()
{
jQuery(this).fadeTo("fast",0.01);
}
function saleMouse()
{
jQuery(this).fadeTo("fast",1.0);
}
也许您可以拥有一个布尔变量,比如说它是“ is_faded_out”,并相应地将其设置为true或false?
thats probably due the bubbling effect, lets say that you have a div with some content there:
<div> <span>Hello</span> <p>World</p> </div>
then, the hover event for the Hello span, and the World paragrapgh is catched in the event listener of the hover of the div.
I had a similar problem, and solved this with:
function entraMouse()
{
if (!jQuery(this).is(':hidden')) jQuery(this).fadeOut();
}
function saleMouse()
{
if (jQuery(this).is(':hidden')) jQuery(this).fadeIn();
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.