Internet Explorer上的jQuery悬停效果问题

Question

I basically wrote my own jQuery hover effect plugin that works in all browsers except in IE(9,8,7)....

Here is the link : http://www.fiver.org/web/testing This is the code:

function go()
{

  hoverEffect = document.getElementsByName("hoverEffect");
  for (i=0; i<hoverEffect.length; i++)
  {
    $(hoverEffect[i]).bind('mouseenter', bMouseOver);
    $(hoverEffect[i]).bind('mouseleave', bMouseOut);
  }

  function bMouseOver(e)
  { 
    $(this).find(".fadebox")
      .animate({opacity: 1},
      300);                                         
  }


  function bMouseOut(e)
  { 
    $(this).find(".fadebox")
      .animate({opacity: 0},
      {duration: 'slow'});

  }


}

$(document).ready(function(){
    go();
});

it's a basic hover effect that's cracking my head! do you have any ideas???

Best,

Answer 1

IE-s getElementsByName has some problems, i wouldn't rely on it.

Try to give those elements a class, instead of name, and select them with jQuery.

Example

HTML:

<div class="hoverEffect">one</div>    
<div class="hoverEffect">two</div>
<div class="hoverEffect">three</div>

Selecting them with JQuery, and assigning events:

$(".hoverEffect").bind('mouseenter', bMouseOver);
$(".hoverEffect").bind('mouseleave', bMouseOut);

This will also get rid of an extra iterating through the DOM and the using of needless arrays (hoverEffect[])

Answer 2

Try using opacity:.00 instead of opacity:0

jQuery opacity animations work better when using .00 as zero opacity instead of 0. I can't really explain and find any documentation why this is, but it had fixed my problems in the past.

Also a little more information about what doesn't work in this script would help :)