Internet Explorer上的jQuery懸停效果問題

Question

我基本上寫了我自己的jQuery hover effect插件，該插件可在除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的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不透明度動畫效果更好。我無法真正解釋和找到任何說明為什么這樣做的文檔，但是過去已經解決了我的問題。

另外，有關此腳本中無效內容的更多信息也會有所幫助:)