WebAppers

/ best free open source web resources /

Shopify

How To Create a Realistic Hover Effect with jQuery

Posted · Category: License Free, Menu

Would you like to Create a Realistic Hover Effect With jQuery? It adds a rising hover effect to a set of icon links using jQuery’s animate effect. In a nutshell, the JS appends the reflection/shadow to each <li>, then animates the position and opacity of these elements and the icon links on hover. And .stop() eliminates any queue buildup from quickly mousing back and forth over the navigation.

Hover Menu

Requirements: jQuery Framework
Demo: http://adrianpelletier.com/sandbox/jquery_hover_nav/
License: License Free

8 Comments
  • http://www.joeykoert.com harrald

    Very nice javascript effect!

    Definetly something to remember for use in future projects.

  • http://www.webappers.com kpjothi

    nice post!!

    thanks!!

  • http://www.doublejdesign.co.uk Jack

    This is fatanstic! I just want to implement in my site soon.

  • http://fedmich.com/life fedmich

    Looks great! Thanks for posting

  • http://www.faridhadi.com Farid Hadi

    That’s really a neat effect. Thanks for sharing!

  • http://www.kuwetka.pl AdAm

    Great stuff :)

  • Amadeus

    I love it :)

    Great work dude

  • http://artmader.com/ Alex B.

    Very nice
     

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons