Home/ Questions/Q 3785354
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T11:30:57+00:00

I adapted some code I had for animating the color of text for animating

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    or

    .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