Home/ Questions/Q 464649
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T23:17:49+00:00

How does the logo in the top left corner of the screen gradually change

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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! //
    • 0