jQuery FadeIn，FadeOut Div - IE7 bug

我有一個div，它會在FF中懸停時淡入淡出，但在IE7中它只隱藏和顯示沒有動畫。這裏是我的代碼：jQuery FadeIn，FadeOut Div - IE7 bug

#nav-buttons { 
    display:none; 
    width:894px; 
    position:relative; 
    z-index:1000; 
} 
#left-button, #right-button { 
position:absolute; 
width:46px; 
height:76px;   
} 
#left-button { 
background:url("images/arrows.png") no-repeat scroll -88px -60px transparent; 
left:-46px; 
} 
#left-button:hover { 
background-position:-88px -260px; 
} 
#right-button { 
background:url("images/arrows.png") no-repeat scroll 3px -60px transparent; 
right:-43px; 
} 
#right-button:hover { 
background-position:4px -260px; 
} 


---------- 
<div id="contents"> 
<div id="nav-buttons"> 
    <a href="javascript:void(0)" id="left-button"></a> 
    <a href="javascript:void(0)" id="right-button"></a> 
</div> 
other html.... 
</div> 

---------- 

$(document).ready(function() {     
    $("#contents").hover(function() { 
     $("#nav-buttons").fadeToggle("slow"); 
    }); 
});

來源

2011-11-21 user1058223

如果有人有ie7這裏是一個小提琴http://jsfiddle.net/KMmSB/5/ –

編輯後。嘗試刪除過濾器。 – craniumonempty

在黑暗中拍攝，但由於「內容」似乎可以正常工作，而按鈕卻沒有，請嘗試刪除短劃線「 - 」以查看是否存在問題。可能不會，但我對舊的Netscape有着閃回的下劃線問題。 – craniumonempty

我能夠fadeToggle（）每個按鈕，而不是直接在這裏<div id=nav-buttons>的解決這個問題是什麼我做了：

$(document).ready(function() {     
    $("#contents").hover(function() { 
     $("#left-button").fadeToggle("slow"); 
     $("#right-button").fadeToggle("slow"); 
    }); 
});

來源

2011-12-02 14:36:38 user1058223

沒有IE7，但也許現在就試試這個。不能修復，但在需要顯示內容時顯示內容...呃，不確定IE7，但與IE9有類似的概率。

$(document).ready(function(){     
    $("#contents").hover(function() { 
     $("#nav-buttons").fadeToggle("slow").queue(function() { 
      $(this).fadeIn("slow"); 
      $(this).dequeue(); 
      }); 
    }); 
});

此外，也許擺脫「顯示：無;」，因爲它的行爲奇怪...或者你想要嗎？

編輯：我發現它可能只是在隊列函數中重新添加fadeToggle。啊，當你將鼠標懸停在別的東西上時，你想要顯示一些東西。我現在明白了。也許只是在隊列中添加另一個fadeToggle，或者當鼠標不再在div上時淡出。

EDIT2：看，你要出現和消失，也許這：

$(document).ready(function(){     
    $("#contents").mouseenter(function() { 
     $("#nav-buttons").fadeIn("slow"); 
    }).mouseleave(function() { 
     $("#nav-buttons").fadeOut("slow"); 
    });  
});

如果你想改變fadeToggle，我建議刪除顯示：當你調用它沒有或將繼續下去關閉屏幕。然後當你離開時你可以放回去。

EDIT3：根據鏈路的嘗試：

Fading issues in Internet Explorer 7 when using jQuery

$(document).ready(function(){     
    $("#contents") 
     .mouseenter(function() { 
      $("#nav-buttons").delay(200).fadeIn(function(){ 
       $(this).css("filter",''); 
      }); 
     }) 
     .mouseleave(function() { 
      $("#nav-buttons").delay(200).fadeOut(function(){ 
       $(this).css("filter",''); 
      }); 
     }); 
});

如果不工作，你很可能將不得不使用直CSS。

來源

2011-11-21 17:16:59 craniumonempty

非常奇怪。我刪除了顯示：無，並切換我的jquery到你的...同樣的問題。它隱藏和顯示完全符合我的代碼，但仍然沒有動畫（不透明度）。我在FF中嘗試了你的代碼和我的代碼，並且它很好地淡入淡出。任何其他想法？ – user1058223

我只是嘗試過，沒有過濾器在IE9中工作，但爲我打破FF。你可能必須做一個瀏覽器檢查它是否工作。 – craniumonempty

沒有骰子:(它只是隱藏和顯示像.show（）或.hide（）會。我想我的用戶不會得到任何奇特的動畫。奇怪的是我可以淡入和淡出#contents div。想知道它是否與左鍵和右鍵的PNG圖像背景有關。我知道過去IE瀏覽器在處理PNG圖片時遇到了一些問題 – user1058223

fadeToggle在IE7中是Buggy！如果你以某種方式得到它的工作，你還會看到如果你淡入淡出的字體，那麼IE7會在進出這個字體的時候對這個字體做出一些奇怪的抗鋸齒...非常難看。

使用顏色動畫（如果可能的話becouse背景）或嘗試.fadeIn（）和.fadeOut（），而不是

來源

2011-11-21 17:47:13 ggzone

jQuery FadeIn，FadeOut Div - IE7 bug

回答

相關問題