Page 1 of 1

Jquery is slow at handling events!

Posted: Mon May 18, 2009 8:10 am
by Sindarin
Well admit it, after seeing a title like that, wouldn't you want to slap me with a big fat mackerel? :D

Well here's my issue, I am trying to make a fading rollover, yeah of the cool kind with fadeIn / fadeOut and some CSS tweaks. Problem is as I hover over the 'buttons' fast, some of them might retain the hover position and won't change back to normal. I tested jQuery's online demos to make sure there isn't a bug or anything but their demos NEVER failed. So I must be doing something wrong:

part of my css:

Code: Select all

<style>
.option1
{
z-index:1;
position:absolute;
display:block;
}
.option1r
{
z-index:2;
position:absolute;
display:block;
}
.option2
{
z-index:1;
position:absolute;
margin-left:107px;
}
.option2r
{
z-index:2;
position:absolute;
margin-left:107px;
}
part of my html code:

Code: Select all

<div id="menubar" align="left">
<img src="files/images/option1.png" alt="Radio Live" border="0" class="option1" />
<img src="files/images/option1-rollover.png" alt="Radio Live" border="0" class="option1r" />
<img src="files/images/option2.png" alt="Radio Live" border="0" class="option2" />
<img src="files/images/option2-rollover.png" alt="Radio Live" border="0" class="option2r" />
</div>
and finally js:

Code: Select all

 
$(document).ready(function(){
 
$(".option1r").hide();
$(".option2r").hide();
 
$(".option1").mouseover( function(){
$(".option1r").show();
});
 
$(".option1r").mouseout( function(){
$(".option1r").hide();
});
 
$(".option1r").mouseover( function(){
$(".option1r").fadeOut("fast");
});
 
$(".option2").mouseout( function(){
$(".option2r").fadeIn("fast");
});
 
$(".option2r").bind("mouseleave", function(){
$(".option2r").fadeOut("fast");
});
 
});
 
p.s. interesting fact is that events like mouseenter and mouseleave do not work unless I bind them.

Re: Jquery is slow at handling events!

Posted: Mon May 18, 2009 11:54 am
by kaszu
I suggest using more specific CSS selector like '#menubar img.option1', they are faster (I know these queries are cached, but still).
Looking at your code I can't understand what effect you are trying to achieve (you have mouseover for option1 and option1r with opposite effects)!?
Instead of

Code: Select all

.hide()
.show()
.fadeIn()
.fadeOut()
use

Code: Select all

.stop().hide()
.stop().show()
.stop().fadeIn()
.stop().fadeOut()
that will stop animations so rolling over/over before they have stopped won't create that bug.
.mouseenter, .mouseleave works for me :)

Re: Jquery is slow at handling events!

Posted: Tue May 19, 2009 3:44 am
by Sindarin
.option1r overlaps .option1 so when I mouse over .option1, option1r appears above that image creating a rollover,

I tried working with opacity on .option1r, it works better, mouse enter/leave works too BUT at this time when I mouseover fast it animates multiple times until it reaches the number of times I my mouse went over it,

Code: Select all

$(".option1r").css('opacity', '0');
 
$(".option1r").mouseenter(function(){
$(".option1r").fadeTo("fast", 1); // This sets the opacity to 100% on hover
});
 
$(".option1r").mouseleave(function(){
$(".option1r").fadeTo("fast", 0); // This sets the opacity to 0% on hover
});
Isn't there a way to get with jquery if an element is currently animated?


EDIT: I used .stop() before fadeTo and now it works! :D Thanks!