CODEWITHSUNDEEP
jqueryjquery-animate
Jake
Jake

Reputation: 1177

Buggy jQuery animate code?

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

Upvotes: 2

Views: 557

Answers (2)

user113716
user113716

Reputation: 322502

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

Upvotes: 1

Frederik Kammer
Frederik Kammer

Reputation: 3177

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.

Upvotes: 1

Related Questions