Internet Explorer 上的 jQuery 悬停效果问题

Question

我基本上编写了自己的 jQuery 悬停效果插件，该插件适用于除 IE(9,8,7) 之外的所有浏览器....

以下是链接： http://www. Fiver.org/web/testing 这就是代码：

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();
});

这是一个基本的悬停效果，让我大吃一惊！你有什么想法吗？？？

最好的，

Answer 1

IE-s getElementsByName 有一些问题，我不会依赖它。

尝试为这些元素指定一个类，而不是名称，然后使用 jQuery 选择它们。

示例

HTML

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

：使用 JQuery 选择它们，并分配事件：

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

这也将消除对 DOM 的额外迭代和使用不必要的数组 (hoverEffect[])

Answer 2

尝试使用 opacity:.00 而不是 opacity:0

当使用 .00 作为零不透明度而不是 0 时，jQuery 不透明度动画效果更好。我无法真正解释并找到任何文档为什么会这样，但它过去解决了我的问题。

另外，有关此脚本中不起作用的内容的更多信息也会有所帮助:)