Buggy jQuery的動畫代碼？

我改編了一些代碼，用於動畫處理背景顏色的動畫文本顏色。但現在的代碼是一個小錯誤。在Chrome瀏覽器中，第一次懸停後，背景會變成白色，在所有瀏覽器中，只需要很長時間就可以加載（如果存在差異，我會將插件存儲在服務器上），因此您必須等待幾秒才能獲得影響。下面是代碼：Buggy jQuery的動畫代碼？

$(document).ready(function() { 
    $(".olli").hover(function() { 
     $(this).stop().animate({ backgroundColor: "#e8e5e2" }, 500); 
    },function(){ 
     $(this).stop().animate({ backgroundColor: "#dbd6d0" }, 500); 
    }); 
});

的.olli類來源於此：

$("#ulnav > li").addClass("olli");

來源

2011-01-23 Jake

普通的`animate`不能動畫顏色，你可以使用這個單獨的插件：http://plugins.jquery.com/project/color – 2011-01-23 14:11:40

@Shadow：OP加載了jQueryUI。這可以讓你爲顏色添加動畫。 – user113716 2011-01-23 14:15:26

@Pat酷，不知道。 – 2011-01-23 14:29:05

您沒有初始顏色爲背景設定。無論是在CSS將其設置爲「關」的顏色，或做到這一點：

$(".olli").hover(function() { 
    $(this).stop().animate({ backgroundColor: "#e8e5e2" }, 500); 
},function(){ 
    $(this).stop().animate({ backgroundColor: "#dbd6d0" }, 500); 
}).css({ backgroundColor: "#dbd6d0" });

或

.olli { 
    background-color: "#dbd6d0"; 
}

計算的風格（在Chrome反正）爲background-color:transparent，因此需要爲出發點動畫和jQueryUI必須使用#FFF。

要解決的加載速度慢的問題，從<head>刪除您<script>標籤並將它們只是以上的分析代碼（#content節之後），並擺脫了.ready()通話。

編輯：

取出.ready()呼叫時，您可能希望這樣做。防止創建全局變量（如果您有任何變量）。

(function($) { 

    $(".olli").hover(function() { 
     $(this).stop().animate({ backgroundColor: "#e8e5e2" }, 500); 
    },function(){ 
     $(this).stop().animate({ backgroundColor: "#dbd6d0" }, 500); 
    }).css({ backgroundColor: "#dbd6d0" }); 

})(jQuery);

來源

2011-01-23 14:10:01 user113716

請從您的網站中刪除這段代碼。

<!-- www.000webhost.com Analytics Code --> 
<script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script> 
<noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript> 
<!-- End Of Analytics Code -->

我的瀏覽器說我，他無法加載count.php文件。因此，你的JS代碼不起作用，因爲你的$(document).ready(function() {是不正確的。

來源

2011-01-23 14:10:39

Buggy jQuery的動畫代碼？

回答

相關問題