背景圖片閃爍jQuery .animate（）

我試圖用動畫構建照片組合的子導航。通常我會用CSS3轉換來完成，但我需要一個適用於Internet Explorer 7-9的jQuery解決方案。背景圖片閃爍jQuery .animate（）

問題是背景圖像在懸停時閃爍不定，我完全不知道爲什麼。在其他瀏覽器中FF一切看起來不錯，只是所有IE都會造成問題。我讀了很多，嘗試了很多，但似乎沒有什麼讓它變得更好。

你會明白我的意思，當你將鼠標懸停在下面的測試頁http://www.webatweiss.de/test/test.html

的代碼片段以下項目：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<head> 
<title>gallery</title> 
<script type="text/javascript" src="js/jquery-1.7.min.js"></script> 
<script type="text/javascript" src="js/jquery.backgroundPosition.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#subnav a").hover(
    function() {$(this).stop().animate({"width":"96px", "height":"96px", "marginTop":"-48px", "marginLeft":"-48px", "backgroundPosition":"-2px -2px"}, 200);}, 
    function() {$(this).stop().animate({"width":"86px", "height":"86px", "marginTop":"-43px", "marginLeft":"-43px", "backgroundPosition":"-7px -7px"}, 150);}); 
    }) 
</script> 

<STYLE type="text/css"> 
* {margin:0px;padding:0px;} 
BODY{font:12px/100% arial;background:#a2a2a2;} 
a {text-decoration:none;outline:none;border:none;} 
ul {width:auto;float:left;list-style-type:none;} 
ul#subnav {height:96px;position:relative;margin:50px;} 
ul#subnav li {height:96px;width:96px;position:relative;float:left;margin-right:17px;} 
ul#subnav li:last-child {margin-right:0px;} 
a {width:86px;height:86px;position:absolute;border-radius:43px;top:50%;left:50%;margin:-43px 0px 0px -43px;background-position: -7px -7px;box-shadow: 0px 2px 3px #777;behavior:url(PIE.php);} 
a:hover {width:96px;height:96px;border-radius:48px;top:50%;left:50%;position:absolute;margin:-48px 0px 0px -48px;background-position:-2px -2px;box-shadow: 0px 3px 4px #777;} 
</style> 
</HEAD> 

<body> 
    <ul id="subnav" > 
     <li><a href="#" style="background-image:url(img/01.jpg);"></a></li> 
     <li><a href="#" style="background-image:url(img/02.jpg);"></a></li> 
     <li><a href="#" style="background-image:url(img/03.jpg);"></a></li> 
     <li><a href="#" style="background-image:url(img/04.jpg);"></a></li> 
     <li><a href="#" style="background-image:url(img/05.jpg);"></a></li> 
    </ul> 
</body> 
</html>

來源

2011-11-16 dexter

我有這個見過幾個不同的時間。雖然它沒有做出絕對完美的過渡，但它確實有幫助。

將這添加到您滑動的圖像上的CSS。

opacity: 1; 
filter: alpha(opacity=100); 
zoom: 1;

來源

2011-11-26 07:38:02 Roger

背景圖片閃爍jQuery .animate（）

回答

相關問題