Gradually changing color

css, javascript, jquery, rollover

Solution

Did you try looking at the source code to the page? It's an opacity change.

// load the logo transition
$("#logo span").css("opacity","0");
$("#logo span").css("display","block");
// logo animation
$("#logo").hover(function() {
    $("#logo span").stop().animate({opacity:1},'slow');
}, function() {
    $("#logo span").stop().animate({opacity:0},'slow');
});

So an image over another image, with the front one fading in and out gradually. NOT a color change.

Note the warning above the code:

// whoah there...  This source code is copyright ShopDev.  By all means, use this website as a source of inspiration - just don't plagiarize! //

Problem

How does the logo in the top left corner of the screen gradually change color as a rollover? I think its done in jquery. If you don't know the code can you point me to a tutorial that can? Thanks. http://www.shopdev.co.uk/blog/ UPDATE: Thanks everyone, I've posted a working version of the code below, ``` <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ // load the logo transition $("#logo span").css("opacity","0"); $("#logo span").css("display","block"); // logo animation $("#logo").hover(function() { $("#logo span").stop().animate({opacity:1},'slow'); }, function() { $("#logo span").stop().animate({opacity:0},'slow'); }); }); </script> <style type="text/css"> #logo span{ background: url(logo2.gif) no-repeat scroll center bottom; width:257px; height:75px; position:absolute; } img{ border:0; } </style> </head> <body> <div id="logo"><a href="#"><span></span><img src="logo.gif"/></a></div> </body> </html> ```

Original source