Internet Explorer 上的 jQuery 悬停效果问题答案

【问题标题】：jQuery hover effect issue on internet explorerInternet Explorer 上的 jQuery 悬停效果问题
【发布时间】：2011-05-17 16:02:07
【问题描述】：

我基本上写了我自己的 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();
});

这是一个让我头疼的基本悬停效果！你有什么想法吗？？？

最好的，

【问题讨论】：

你给了我们一半的代码和一个损坏的链接
@Chris 格式问题，我至少修复了那部分。

标签： javascript jquery-hover

【解决方案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[])

【讨论】：

既然元素都有名字属性，为什么不直接用jQuery来取名字呢？ $('[name="hoverEffect"]')。不是最快的选择器，但应该不会比使用类选择器慢。
您的班级选择器也有一个问题，您忘记了“。”
@Michal 这只是我的编码风格，随便你

【解决方案2】：

尝试使用 opacity:.00 代替 opacity:0

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

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

【讨论】：