有问题的 jQuery 动画代码？

发布于 2024-10-13 08:01:06 字数 486 浏览 3 评论 0原文

我改编了一些用于对文本颜色进行动画处理的代码，以对背景颜色进行动画处理。但现在代码有点问题。在 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");

原文

I adapted some code I had for animating the color of text for animating the colour of the background. But now the code is a little buggy. In Chrome the background changes to white on the first hover over, and in all browsers it just takes ages to load (I have the plugins stored on the server if that makes a difference), so you have to wait a few seconds to get the effect. Here is the code:

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

The .olli class comes from this:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

留一抹残留的笑 2024-10-20 08:01:06

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

要解决加载缓慢的问题，请从中删除

编辑：

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

(function( $ ) {

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

})( jQuery );

You don't have an initial color set for the background. Either set it in CSS to the "off" color, or do this:

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

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

The computed style (in Chrome anyway) is background-color:transparent, so a starting point is needed for the animation, and jQueryUI must use #FFF.

To get around the slow loading issue, remove your <script> tags from the <head> and place them just above the analytics code (right after the #content section), and get rid of the .ready() call.

EDIT:

You may want to do this when removing the .ready() call. Prevents creation of global variables (if you have any variables).

(function( $ ) {

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

})( jQuery );

回复收藏 0 原文

离旧人 2024-10-20 08:01:06

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

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

Please remove this lines of code from your site.

<!-- 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 -->

My Browser says me, that he could not load the count.php-file. Therefore your JS-Code doesn't work 'cause your $(document).ready(function() { is not true.

回复收藏 0 原文

~没有更多了~