Buggy jQuery animate code?_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-06 12:11 出处：网络

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 bac开发者_StackOverflowkground 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");

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 );

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.