addClass removeClass problem
Hi
I tried to "convert" a script code into jquery, but there is still a small problem.
what the script should do:
As generally known the ie7 does not support css hover effects, so the script adds a class to generate the hover effect.
My problem:
When I use the jquery code and move from one <li> tag to the next
there is a little hesitate (a small blink).
The "orginal" java code works fluently without a hesitate.
I guess there is a problem with adding and removing a classname but I dont know how to fix it.
This is the orginal code:
-
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
and this is the code converted into jquery:
-
<script type="text/javascript">
var isShow = false;
$(document).ready(function(){
$("ul#nav li").mouseover(function(){
$(this).addClass("sfhover");
});
$("ul#nav li").mouseout(function(){
$(this).removeClass("sfhover");
});
});
</script>