IdeaMonk

thoughts, ideas, code and other things...

Sunday, September 20, 2009

Trying some jQuery effects

Many websites and blog mention about how creatively has Dragon Interactive used cross fade to give that amazing hover effect on their navigation bar.

Looks awesome right. So today I sat to figure out how do I do the same thing with jQuery and this is what came up in my mind -



  1. We place two DIVs over one another -

    <div class='content'>
    <div class='overlay'>
    </div>
    </div>

  2. Do some Photoshop/GIMP foo and make two images


  3. Style them to have those different backgrounds -

    .content{
    width:500px;
    height:300px;
    background: url(images/frame2.png) no-repeat;
    margin:0px auto;
    }
    .overlay{
    width:500px;
    height:300px;
    background: url(images/frame7.png) no-repeat;
    }

  4. Add hovering behavior to the upper one with jQuery -

    <script type='text/javascript' src='jq.js'></script>

    <script language='javascript'>

    $(document).ready( function() {
    $(".overlay").hover(
    function() {
    $(this).stop().fadeTo(400,0);
    },
    function () {
    $(this).stop().fadeTo(300,1);
    }
    );
    });

    </script>

That's it, done :) head on to live demo here or checkout the complete source on github.

Labels: , , ,

2 Comments:

At September 20, 2009 at 9:16 PM , Blogger l0nwlf said...

Fuck man .. the _demo_ is mind-blowing :O :D

 
At September 20, 2009 at 9:32 PM , Blogger IdeaMonk said...

Lol :P
Next Rainbot's interface would be totally axaxified and as live as now.sprint.com :P

 

Post a Comment

Subscribe to Post Comments [Atom]

<< Home