Jquery is slow at handling events!
Posted: Mon May 18, 2009 8:10 am
Well admit it, after seeing a title like that, wouldn't you want to slap me with a big fat mackerel?
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:
part of my html code:
and finally js:
p.s. interesting fact is that events like mouseenter and mouseleave do not work unless I bind them.
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;
}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>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");
});
});