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 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" });
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 );
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.
加载中,请稍侯......
精彩评论