Question

我修改了一些代码，用于设置文本颜色的动画，以设置背景颜色的动画效果。但现在代码有点儿了。在Chrome中，第一次悬停时背景变为白色，在所有浏览器中，加载时间只需要很长时间（如果有所不同，我将插件存储在服务器上），所以你必须等待几秒才能获得影响。这是代码：

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

.olli课程来自：

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

Answer 1

您没有为背景设置初始颜色。将它在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。

要解决缓慢加载问题，请从<script>中删除<head>代码，并将 代码放在上方在#content部分之后），摆脱.ready()电话。

修改

删除.ready()电话时，您可能希望执行此操作。防止创建全局变量（如果您有任何变量）。

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

Answer 2

请从您的网站上删除这行代码。

<!-- 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() {不正确。

Buggy jQuery动画代码？

2 个答案: