May 31, 2009

Create a Realistic Hover Effect With jQuery

Filed under: Code, jQuery — Adrian @ 8:40 pm

For one of the projects I’m currently working on with Rareview, we wanted to add a rising hover effect to a set of icon links. Using jQuery’s animate effect, I experimented with icons that have reflections and others with shadows. Here is a demo with two examples:

jquery-rising-hover-2

The HTML and CSS are both straightforward and have a structure and style common to many web navigations and menus (for the sake of post length, I’m not including HTML/CSS code examples here but you are free to snoop around in the demo or view the files in the download below).

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. I’ve added .stop() to eliminate any queue buildup from quickly mousing back and forth over the navigation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

// Begin jQuery
 
$(document).ready(function() {
 
/* =Reflection Nav
-------------------------------------------------------------------------- */	
 
    // Append span to each LI to add reflection
 
    $("#nav-reflection li").append("<span></span>");	
 
    // Animate buttons, move reflection and fade
 
    $("#nav-reflection a").hover(function() {
        $(this).stop().animate({ marginTop: "-10px" }, 200);
        $(this).parent().find("span").stop().animate({ marginTop: "18px", opacity: 0.25 }, 200);
    },function(){
        $(this).stop().animate({ marginTop: "0px" }, 300);
        $(this).parent().find("span").stop().animate({ marginTop: "1px", opacity: 1 }, 300);
    });
 
/* =Shadow Nav
-------------------------------------------------------------------------- */
 
    // Append shadow image to each LI
 
    $("#nav-shadow li").append('<img class="shadow" src="images/icons-shadow.jpg" width="81" height="27" alt="" />');
 
    // Animate buttons, shrink and fade shadow
 
    $("#nav-shadow li").hover(function() {
    	var e = this;
        $(e).find("a").stop().animate({ marginTop: "-14px" }, 250, function() {
        	$(e).find("a").animate({ marginTop: "-10px" }, 250);
        });
        $(e).find("img.shadow").stop().animate({ width: "80%", height: "20px", marginLeft: "8px", opacity: 0.25 }, 250);
    },function(){
    	var e = this;
        $(e).find("a").stop().animate({ marginTop: "4px" }, 250, function() {
        	$(e).find("a").animate({ marginTop: "0px" }, 250);
        });
        $(e).find("img.shadow").stop().animate({ width: "100%", height: "27px", marginLeft: "0px", opacity: 1 }, 250);
    });
 
// End jQuery
 
});

Please note, for the purposes of this quick demo, I did not bother including support for IE6.

View Demo   or   Download

Update 06/01/2009: I updated the shadow example so that it has more of a bounce to it.

Update 07/08/2009: As Cody Lindley points out in the comments (thanks!), this example does not require the UI and could work with jQuery alone (I’ve updated the link in the post). However, this being a navigation example, I’ll leave the UI script in the demo and download for users who want to experiment with animating text, background, borders, or outline colors.

123 Comments »

  1. Nice job… the shadow effect especially looks superb.

    Comment by caleb — June 5, 2009 @ 11:25 am

  2. Brought a smile to my face.

    Not sure which one I prefer, the shadow or the reflection – both look great.

    Comment by Zafar Majid — June 6, 2009 @ 11:35 am

  3. very good stuff Adrian…will certainly be taking advantage of this tutorial. thanks for sharing.

    Comment by Jermaine — June 16, 2009 @ 2:39 am

  4. That’s really cool Adrian. I just started using jQuery for a project rebuilding my Sensai’s website (www.wm-ma.com). I’ve gotta say, it saves a lot of time vs. regular Javascript development!

    Comment by Tristan — June 16, 2009 @ 1:28 pm

  5. Nice work! One small clarification. animate() is part of jQuery core. jQuery UI is not needed.

    Comment by cody lindley — July 8, 2009 @ 7:31 pm

  6. REALLY like the look of this! Well done!

    Comment by BJ Neilsen — July 8, 2009 @ 7:45 pm

  7. @Cody: You’re absolutely right, thank you for catching that! The demo above does not require the UI and could work with jQuery alone. I suppose if you wanted to add text to the navigation, or a border/background color, then the UI would be useful in animating color changes.

    Comment by Adrian — July 8, 2009 @ 7:54 pm

  8. I feel I should point out that although the effect looks cool, the fact that the shadows get smaller is not scientifically correct. :)

    Comment by Paul — July 8, 2009 @ 8:12 pm

  9. @Paul: Haha, right you are. Good thing this is only a demo ;)

    Comment by Adrian — July 8, 2009 @ 8:38 pm

  10. [...] Create a Realistic Hover Effect With jQuery « Blog and Web Design Portfolio of Adrian Pelletieradrianpelletier.com [...]

    Pingback by Create a Realistic Hover Effect With jQuery « Blog and Web Design Portfolio of Adrian Pelletier « Netcrema - creme de la social news via digg + delicious + stumpleupon + reddit — July 8, 2009 @ 9:42 pm

  11. [...] Como crear un efecto de cuadros voladores con jQuery – vía @_krees Category: Recortes For one of the projects I’m currently working on with Rareview, we wanted to add a rising hover effect to a set of icon links. Using the animate effect from the jQuery UI, I experimented with icons that have reflections and others with shadows.Create a Realistic Hover Effect With jQuery UI « Blog and Web Design Portfolio of Adrian Pelletier [...]

    Pingback by A collection of stuff » Blog Archive » Como crear un efecto de cuadros voladores con jQuery – vía @_krees — July 8, 2009 @ 10:03 pm

  12. very godd effect, probably i will use it someday ;) thx

    Comment by battisti — July 8, 2009 @ 11:04 pm

  13. Muito Bom!

    Comment by www.ediedson.com — July 8, 2009 @ 11:09 pm

  14. [...] Sheep EternallydeliciousCSSSlickMap CSS – IDEA*IDEA Six Tools For Testing Designs On Mobile DevicesCreate a Realistic Hover Effect With jQuery Blog and Web Design Portfolio of Adrian Pelletier50 Best-Of Designers (NEW) Download Picks and Resources | NoupeHow Community Arts Organizations Are [...]

    Pingback by popurls.com // popular today — July 9, 2009 @ 12:40 am

  15. really nice effect jquery rock and i bookmarked this link.

    Comment by webmasterdubai — July 9, 2009 @ 1:03 am

  16. Absolutely superb – looks really stunning. Good job!

    Comment by wrigs — July 9, 2009 @ 1:56 am

  17. I prefer the shadow design. Very cool, thanks for sharing

    Comment by John Goode — July 9, 2009 @ 1:57 am

  18. [...] the original post here: Create a Realistic Hover Effect With jQuery « Blog and Web Design Portfolio of Adrian Pelletier Tags: Comments0 Leave a Reply Click here to cancel [...]

    Pingback by Create a Realistic Hover Effect With jQuery « Blog and Web Design Portfolio of Adrian Pelletier — July 9, 2009 @ 2:50 am

  19. Fantastic!! it’s really real!! ;) Thanks for share it!!

    Comment by Xavier — July 9, 2009 @ 7:06 am

  20. [...] In: JQuery plugins 9 Jul 2009 for one of the projects I’m currently working on with Rareview, we wanted to add a rising hover effect to a set of icon links. Using jQuery’s animate effect, I experimented with icons that have reflections and others with shadows. Here is a demo with two examples: Go to Source [...]

    Pingback by Create a Realistic Hover Effect With jQuery « Blog and Web Design Portfolio of Adrian Pelletier | Squico — July 9, 2009 @ 8:20 am

  21. Very cool man! jQuery rocks…just starting to get into it. Like the design of your site too, nice typography!

    ~ David

    Comment by David F. Weiss — July 9, 2009 @ 9:26 am

  22. [...] [j-Query]画像が浮き上がるアニメーションするプラグイン「Hover Effect」 [...]

    Pingback by » [j-Query]画像が浮き上がるアニメーションするプラグイン「Hover Effect」｜ウェブデザインブログ｜graphix-design.jp｜ — July 12, 2009 @ 2:17 am

  23. Cool effects! Thanx for sharing :)

    Comment by naesk — July 13, 2009 @ 3:56 pm

  24. pretty nifty–Q: how do you get your text visible on the button?

    Comment by russ — July 15, 2009 @ 9:37 pm

  25. @russ: If you check out the HTML, the link text is inside the anchor tag. For this example, I added a large text-indent and hidden overflow so the text wouldn’t be visible with the icons. You could, of course, change this and set it up however you want.

    Comment by Adrian — July 15, 2009 @ 9:42 pm

  26. [...] Pelletier has an article that explains how to create a realistic hover effect using jQuery. I’m not sure what utility this would have for most sites, but I imagine flashy [...]

    Pingback by Benjamin A. Shelton | Blog » Blog Archive » Links of the Week: July 15th — July 15, 2009 @ 10:04 pm

  27. [...] Article. [...]

    Pingback by Animate en jQuery — July 16, 2009 @ 7:21 pm

  28. text-indent and hidden overflow so the text wouldn’t be visible with the icons.

    Comment by Text to Speech(TTS)A — July 18, 2009 @ 9:37 am

  29. whoa, shadow rules!

    Comment by Jaime — July 24, 2009 @ 10:18 pm

  30. Wow this is great, I can see myself using this effect. Very nice and smooth, even in Firefox 2 with all my add-ons.

    Comment by Dave Reeder — July 29, 2009 @ 11:35 am

  31. Trying to get it to work with my horizontal navigation, but not having any luck. Any suggestions (im implementing in my given website).

    Comment by Aaron — August 2, 2009 @ 10:20 pm

  32. This really looks great. Nice and usefull tutorial

    Comment by Greg — August 3, 2009 @ 1:03 pm

  33. Very nice work. Thank you.

    Comment by yAnTar — August 6, 2009 @ 2:52 am

  34. Love it thanks – makes all the difference when you can add shaddow.

    Comment by Gites France — August 7, 2009 @ 6:15 am

  35. [...] Create a Realistic Hover Effect With jQuery [...]

    Pingback by javascript library @inforz - アイコン hoverエフェクト — August 9, 2009 @ 8:42 pm

  36. Hey, good work!

    You NEED to port this over to Moo!

    Josh

    Comment by Josh Bartlett — August 10, 2009 @ 10:34 pm

  37. http://www9.speedyshare.com/data/283223742/17971670/21853130/Unbenannt3.JPG

    if you move your mouse fast between two of them, this might happen!:O
    and usualy all the way to the right

    Comment by LML — August 11, 2009 @ 3:44 am

  38. [...] Create a Realistic Hover Effect With jQuery « Blog and Web Design Portfolio of Adrian Pelletier — 6:03pm via [...]

    Pingback by Elsewhere, on August 12th - Once a nomad, always a nomad — August 12, 2009 @ 12:07 am

  39. [...] Create a Realistic Hover Effect With jQuery : View Demo [...]

    Pingback by 25+ jQuery Tutorials Roundup | ExtraTuts — August 17, 2009 @ 3:30 pm

  40. Great effect. I’ll have to use it on my web design portfolio soon. Please keep em coming!

    Comment by Jamie — August 20, 2009 @ 5:35 pm

  41. [...] Visit Tutorial – Demo [...]

    Pingback by Amazing Multi Style Menu w/ jQuery and CSS | Free Share Everything — August 25, 2009 @ 1:43 pm

  42. [...] Create a Slick Tabbed Content Area using CSS & jQuery Create a Realistic Hover Effect With jQuery horinaja for scriptaculous or jQuery jQuery – Horizontal Accordion 8 Sites with Excellent [...]

    Pingback by シンプルかつ高機能な jQuery を使ったプラグインのまとめ | Nutspress — September 8, 2009 @ 3:08 am

  43. This is not an original idea: we have developed this effect for our website http://www.informinds.com (published on 14 october 2008) . This is visible in the section “Prodotti” :)

    Comment by Informinds Consulting — September 11, 2009 @ 4:34 am

  44. Nice!
    It doesn’t work on Google Chrome though, dunno why…

    Comment by David — September 11, 2009 @ 6:22 am

  45. Oh! Very nice job, its great!

    Thanks for share!

    Marcio.

    Comment by Marcio — September 11, 2009 @ 9:08 am

  46. [...] Pelletier recentemente criou um efeito animado usando jQuery que simula reflexos e sombras em botões. A estrutura do código é muito semelhante a outros menus [...]

    Pingback by Efeito jQuery para Reflexos e Sombras | Webgrafismo — September 11, 2009 @ 10:00 am

  47. [...] 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 [...]

    Pingback by AMB Album » How To Create a Realistic Hover Effect with jQuery — September 11, 2009 @ 11:42 am

  48. [...] 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 [...]

    Pingback by How To Create a Realistic Hover Effect with jQuery - Iconlandia — September 11, 2009 @ 12:06 pm

  49. Absolutely Brilliant!! I love the Bouncy shadow version, and the sound effect is a nice touch too!

    Comment by Anton — September 11, 2009 @ 12:25 pm

  50. [...] Muy interesante efecto de hover realizado con jQuery. 0 # [...]

    Pingback by Efecto hover con jQuery — Tablosign — September 11, 2009 @ 1:20 pm

  51. [...] Create a Realistic Hover Effect With jQuery « Blog and Web Design Portfolio of Adrian Pelletier (tags: jquery tutorials effects webdesign menu) [...]

    Pingback by links for 2009-09-11 « Giri’s Blogmarks — September 11, 2009 @ 2:02 pm

  52. Very nice script, but …. I don’t see the “Link text” in the demo page !
    (Linux, Firefox 3.5.3).

    Comment by Israel Bravo — September 12, 2009 @ 12:51 am

  53. [...] Adrian Pelletier Articles SimilairesLéopard Desktop avec Jquery [Web] (1)jQuery Cheat Cheet, Format A4 ou iPhone [Dev] (0)NetBeans 6.5 RC2 éditeur php/html/css/librairie javascript/java/c++ (0)Code Lobster, éditeur php/html/css/javascript gratuit (3)Mise à jour importante de Firefox ! (1) Astuces, Divers, Jquery Diffuser ce Billet (twitter et Facebook) [...]

    Pingback by Comment faire pour créer un effet réaliste Hover avec jQuery | Guppytrucs Freeware — September 12, 2009 @ 2:56 am

  54. [...] Create a Realistic Hover Effect With jQuery « Blog and Web Design Portfolio of Adrian Pelletier (tags: jquery hover animation navigation Effects) [...]

    Pingback by BrianLang.ca » Blog Archive » links for 2009-09-12 — September 12, 2009 @ 3:03 am

  55. [...] Adrian Pelletier has been playing with jQuery and created a lovely looking hover effect with relection. The jQuery appends the reflection/shadow to each element. Then animates the position and opacity of these elements and the icon links on hover. [...]

    Pingback by jQuery Based Hover Effect | PHP and MySQL Development — September 12, 2009 @ 3:51 pm

  56. Hey, where is the link text (Link Text) in the demo ?
    I don’t see it ! And the moving pictures don’t give me any information!

    Comment by Bravo — September 13, 2009 @ 1:36 am

  57. Wow, this could be useful for me ^_^. Thanks so much adrian !!!

    Comment by fajarfaqih — September 13, 2009 @ 3:07 pm

  58. [...] consulter l’article : http://www.adrianpelletier.com/2009/05/31/create-a-realistic-hover-effect-with-jquery-ui/ Partager [...]

    Pingback by Un superbe effet de survol avec jQuery | Display:inline — September 14, 2009 @ 8:14 am

  59. [...] 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 [...]

    Pingback by Nilesh Manohar & Erzsebet Marothi » How To Create a Realistic Hover Effect with jQuery — September 15, 2009 @ 9:52 am

  60. That is awesome. Well done.

    Comment by Mo — September 16, 2009 @ 7:42 am

  61. That looks awesome! I’m glad I found this.

    Comment by Bill Ludwig — September 16, 2009 @ 10:40 am

  62. @Informinds Consulting: Nope, the hover effect is not a groundbreaker but one big difference between your example and mine is your site uses flash, whereas my demo is a combination of HTML, CSS, and Javascript.

    @David: There should be no issues with Chrome.

    @everyone looking for text: I have the text hidden using a large indent and hidden overflow in the CSS. This is a demo only; feel free to make your own edits to include text if you want.

    Comment by Adrian — September 16, 2009 @ 8:04 pm

  63. Look nice :)

    Comment by conan — September 17, 2009 @ 1:47 am

  64. [...] Ver el tutorial [...]

    Pingback by jQuery: tutoriales y recursos para nuestros diseños web | Recursos para desarrollo y diseño web - AlmacenPlantillasWeb Blog — September 20, 2009 @ 3:53 am

  65. [...] Create a Realistic Hover Effect With jQuery via Ajax < Web development | AjaxRain.com on 9/21/09 [...]

    Pingback by jean philippe gousse » Blog Archive » Create a Realistic Hover Effect With jQuery — September 21, 2009 @ 12:43 pm

  66. [...] are both straightforward and have a structure and style common to many web navigations and menus. Web Site Demo Download AKPC_IDS += "461,";Popularity: unranked [?] Share and [...]

    Pingback by jQuery Tutorial – Create a Realistic Hover Effect With jQuery | jQuery Wisdom — September 27, 2009 @ 1:26 pm

  67. I love this,but, i think its better to do this without make a single reflect for each image!!!

    so i combine this solution with reflect plugin ( see this : http://docs.jquery.com/Plugins:reflect )

    you can see my demo here :

    http://daneshpour.org/jquery/ref_ani/

    I hope this will be usefull !

    Comment by Masoud — September 28, 2009 @ 5:56 am

  68. [...] Create a Rea­lis­tic Hover Effect With jQuery « Blog and Web Design Port­fo­lio of Adrian Pelle… “For one of the pro­jects I’m currently wor­king on with Rare­view, we wan­ted to add a rising hover effect to a set of icon links. Using jQuery’s ani­mate effect, I expe­ri­men­ted with icons that have reflec­tions and others with shadows.” (tags: jquery javasc­ript web­de­ve­lop­ment web­de­sign css hover) [...]

    Pingback by links for 2009-09-28 | Yostivanich — September 28, 2009 @ 10:07 am

  69. Hey bro – nice job! I implemented it, and it works perfect. However, I have one question, do you happen to know why when you use a .png for the “shadow” IE (all versions) blows up the shadow to ten times it’s original size. On first load, before hover, it’s fine.

    I tested this in yours, without changing a single thing, just to be sure, and IE does the same in your demo. Any ideas why? Thanks for your time!

    Comment by Eric — September 30, 2009 @ 10:27 am

  70. OK, the problem is caused by the opacity code below. If I remove it, the IE7/8 problem goes away. But, then I loose part of the effect. Any way to write that so IE is happy with the opacity??? Thanks!

    $(document).ready(function() {
    // Append shadow image to each LI
    $(“#nav li”).append(”);
    // Animate buttons, shrink and fade shadow
    $(“#nav li”).hover(function() {
    var e = this;
    $(e).find(“a”).stop().animate({ marginTop: “-14px” }, 250, function() {
    $(e).find(“a”).animate({ marginTop: “-10px” }, 250);
    });
    $(e).find(“img.shadow”).stop().animate({ width: “85px”, height: “20px”, marginLeft: “10px”, opacity: 0.25 }, 250);
    },function(){
    var e = this;
    $(e).find(“a”).stop().animate({ marginTop: “4px” }, 250, function() {
    $(e).find(“a”).animate({ marginTop: “0px” }, 250);
    });
    $(e).find(“img.shadow”).stop().animate({ width: “105px”, height: “27px”, marginLeft: “0″, opacity: 1 }, 250);
    });
    });

    Comment by Eric — September 30, 2009 @ 4:55 pm

  71. [...] Please note, for the purposes of this quick demo, I did not bother including support for IE6. Demo: http://adrianpelletier.com/sandbox/jquery_hover_nav/ Download: http://adrianpelletier.com/sandbox/jquery_hover_nav/demo.zip Source: http://www.adrianpelletier.com/2009/05/31/create-a-realistic-hover-effect-with-jquery-ui/ [...]

    Pingback by Create a Realistic Hover Effect With jQuery — October 2, 2009 @ 1:56 pm

  72. Hi,
    This tutorial is simply awesome.
    I have a problem though. In this demo, images do not change form or color when they are hovered over. But I need that effect, such that when the user hovers over the image, the image color changes(thats just a matter of changing the image on hover ). I have been successful in doing it so far, but there is this one problem. When i hover, the color changes, but when I move the mouse back, (I am still in the hover function), the image takes its original color… sort of like a flickering effect. Could you please tell me how to retain the hover effect even when a user moves the mouse away ?

    Comment by Lin — October 19, 2009 @ 1:16 am

  73. @Adrian: Nope, in our website there is no Flash, only HTML, CSS, and Javascript too. So, it’s not an original idea. ;)

    Quote:
    @Informinds Consulting: Nope, the hover effect is not a groundbreaker but one big difference between your example and mine is your site uses flash, whereas my demo is a combination of HTML, CSS, and Javascript.

    Comment by Informinds Consulting — October 20, 2009 @ 10:24 am

  74. @Informinds: My mistake, you have a very flash-like website ;) At any rate, the point of this tutorial was simply to show a code example of how to achieve an effect I liked. You’re more than welcome to write your own tutorials for your “original” idea.

    Comment by Adrian — October 20, 2009 @ 10:34 am

  75. nice..it smoot animated. thank for code download

    Comment by chiangmai guide and tour — October 29, 2009 @ 2:52 am

  76. [...] 3. Create a Realistic Hover Effect [...]

    Pingback by 10 Awesome Techniques and Examples of Animation with jQuery — November 1, 2009 @ 10:51 pm

  77. Thanks, really cool!!!

    Comment by Tung — November 2, 2009 @ 12:58 am

  78. [...] 3. Create a Realistic Hover Effect [...]

    Pingback by 10 Awesome Techniques and Examples of Animation with jQuery - Web Design and SEO Blog — November 2, 2009 @ 7:11 am

  79. [...] Создание красивых эффектов при наведении. В этом примере, вы узнаете, как можно с помощью jQuery [...]

    Pingback by 10 примеров анимации с jQuery | Превосходный журнал — November 2, 2009 @ 12:01 pm

  80. Hi Adrian,

    First, thanks for the great effect! I’m using it in this new site: http:bendmagic.com.

    My problem is with IE7 & 8…the shadows become opaque on hover. As I understand (and I’m no js guru) IE has trouble with opacity changes in png files. Is there a way to fix this for IE7 & 8? (Or must I live with it?) I cannot use .jpgs like your example did because of the pattern behind icons.

    Works great in all other browsers!

    Comment by Catherine Azzarello — November 2, 2009 @ 5:56 pm

  81. @Catherine: IE creates a nasty “black border” when animating PNGs. You might want to google “IE PNG fade” to learn more about the issue and possible solutions. For this demo, I bypassed the issue by using JPGs.

    Comment by Adrian — November 2, 2009 @ 6:02 pm

  82. [...] Efectos de flotación de objetos, reflejos y sombras. Ejemplo. [...]

    Pingback by CyberHades » Blog Archive » 10 Técnicas impresionantes y ejemplos de animación con jQuery — November 3, 2009 @ 7:11 am

  83. [...] Realistic Hover Effect | [...]

    Pingback by Jquery ile hazırlanmış 10 adet animasyon ve eğitimi | Blog GizliKale Güncel Linkler — November 3, 2009 @ 8:03 am

  84. [...] jQuery’s animate effect, I experimented with icons that have reflections and others with shadows. Web Site Demo Download AKPC_IDS += "1158,";Popularity: unranked [?] Share and [...]

    Pingback by jQuery Tutorial – Create a Realistic Hover Effect With jQuery | jQuery Wisdom — November 3, 2009 @ 2:12 pm

  85. Simples and effective script. Thanks for share.

    Comment by Maicon Sobczak — November 3, 2009 @ 3:54 pm

  86. [...] 3. Create a Realistic Hover Effect [...]

    Pingback by 10 Awesome Techniques and Examples of Animation with jQuery | Seventy Seven — November 4, 2009 @ 4:39 am

  87. [...] Realistic Hover Effect | [...]

    Pingback by Görenlere “OHA” Dedirten, JQuery ile Hazırlanmış, 10 Adet Animasyon ve Eğitimi « Bay Bedava – Netten Başlıklar — November 4, 2009 @ 10:07 am

  88. [...] 3. Create a Realistic Hover Effect [...]

    Pingback by 10 Excellent Animation Tips with jQuery | Amazing and Inspiring Design — November 4, 2009 @ 2:39 pm

  89. [...] 3. Create a Realistic Hover Effect [...]

    Pingback by 10 Awesome Techniques and Examples of Animation with jQuery « Blogoholics Anonymous — November 4, 2009 @ 6:29 pm

  90. Wow… It’s really amazing… Thank you very much…

    Comment by Rheza — November 5, 2009 @ 8:36 am

  91. [...] 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 [...]

    Pingback by Build a Realistic Hover Effect with jQuery | bijusubhash.com — November 6, 2009 @ 9:17 am

  92. [...] Realistic Hover Effect | [...]

    Pingback by Görenlere “OHA” Dedirten, JQuery ile Hazırlanmış, 10 Adet Animasyon ve Eğitimi | bildirgin.com | internet, tasarım, popüler kültür, teknoloji, mimler ve mucizeleri — November 6, 2009 @ 6:22 pm

  93. [...] Shared Create a Realistic Hover Effect With jQuery « Blog and Web Design Portfolio of Adrian Pelletier. [...]

    Pingback by 4:31 ← pseudopost.org — November 7, 2009 @ 11:33 pm

  94. good tutorial.. thanks

    Comment by faisal amir — November 23, 2009 @ 12:51 am

  95. [...] For one of the projects I’m currently working on with Rareview, we wanted to add a rising hover effect to a set of icon links. Using jQuery’s animate effect, I experimented with icons that have reflections and others with shadows. Here is a demo with two examples: Tutorials Sample Page [...]

    Pingback by Create a Realistic Hover Effect With jQuery — November 23, 2009 @ 3:25 am

  96. [...] create-a-realistic-hover-effect-with-jquery-ui Share this on del.icio.usDigg this!Share this on FacebookTweet This!Subscribe to the comments for this post?Add this to Google BookmarksShare this on FriendFeedAdd this to 100 bookmarksShare this on Blogosphere News [...]

    Pingback by Ajax Finder [Ajax探索者] » Create a Realistic Hover Effect With jQuery — November 23, 2009 @ 4:27 am

  97. [...] Ver tutorial y descargar código [...]

    Pingback by Diseño Web. Animación con jQuery « Blog de Diseño Web — November 27, 2009 @ 7:15 am

  98. [...] Create a Realistic Hover Effect With jQuery « Blog and Web Design Portfolio of Adrian Pelletier (tags: jquery shadow webdesign reflection) Share this post! Twitter Digg Facebook Delicious StumbleUpon Google Bookmarks LinkedIn Technorati Favorites This entry was posted on 12/10/2009, 11:01 pm and is filed under misc. You can follow any responses to this entry through RSS 2.0. You can leave a response, or trackback from your own site. [...]

    Pingback by links for 2009-12-10 | Steve Eller — December 11, 2009 @ 1:01 am

  99. [...] 3 : Create a Realistic Hover Effect With jQuery Demo Hướng dẫn [...]

    Pingback by 13 bài hướng dẫn tạo hiệu ứng cho menu bằng jquery — December 14, 2009 @ 12:48 am

  100. Wow…the shadow one…very nice :) like this so much….

    Comment by Vishnu Valentino — December 14, 2009 @ 9:52 am

  101. Adrian,

    is there a way to make each icon a different width and have it animate? (different sized buttons for my menu)

    Comment by Drew — December 18, 2009 @ 2:26 pm

  102. [...] 3. Create a Realistic Hover Effect [...]

    Pingback by 10 Awesome Tutorial Animation Using Jquery | denbagus blog — December 24, 2009 @ 8:59 pm

  103. [...] 3. Create a Realistic Hover Effect [...]

    Pingback by 10 Awesome Animation Using Jquery « Er.Krushna Chandra Muni :: Professional Web Developer | Website Design Orissa | Website Design Bhubaneswar | Website Design India | Website Design New Zealand | Website Design Auckland — December 26, 2009 @ 11:36 am

  104. [...] Bonito efecto de sombra al hacer hover sobre el enlace Crear un menu con imagenes y efectos de desvanecimiento [...]

    Pingback by DSergio.com – Enlaces de interes #01 — December 27, 2009 @ 5:11 am

  105. [...] ลองดูกันนะครับ ไปเจอบทความนี้ที่ Link เลยเอามาฝากกัน เห็นสวยดีครับ [...]

    Pingback by สร้างไอคอนสไตล์ mac แบบเทพๆ ด้วย jquery — January 2, 2010 @ 2:20 pm

  106. If you are going to us png’s for the shadow, and it keeps blowing up when you hover, all you need to do is remove the opacity settings from the ‘execute.js’ script.
    Be sure to remove the comma and value:
    ……… marginTop: “18px”, opacity: 0.25}
    should become:
    ……… marginTop: “18px”}
    the shadow doesnt fade, but it also doesnt blow up

    Comment by Mike — January 4, 2010 @ 1:57 pm

  107. [...] create-a-realistic-hover-effect-with-jquery-ui VN:F [1.8.0_1031]please wait…Rating: 0.0/10 (0 votes cast)VN:F [1.8.0_1031]Rating: 0 (from 0 votes)AKPC_IDS += "485,";Popularity: unranked [?] 相关日记jQuery的弹出窗口插件 FancyBox (0) google_ad_client = ""; google_ad_width = 336; google_ad_height = 280; google_ad_format = "336×280_as"; google_ad_type = "text"; google_color_border = "ffffff"; google_color_bg = "ffffff"; google_color_link = "474747"; google_color_text = "000000"; google_color_url = "E11888"; No Comments Leave a Reply [...]

    Pingback by Create a Realistic Hover Effect With jQuery « 幻岛|领地 — January 9, 2010 @ 8:37 pm

  108. You have a really nice site, respect, and your code is beautiful. There is just something really great about doing something so obviously well.

    Comment by Shawn — January 11, 2010 @ 2:52 pm

  109. [...] Ver tutorial y descargar código [...]

    Pingback by Diseño Web. Animación con jQuery | Blog Sevilla Web Profesionales freelance Santuary Servite — January 14, 2010 @ 7:40 am

  110. One word. awesome.

    Comment by WPbud — January 14, 2010 @ 11:59 pm

  111. Wow. amazing. I love it.
    We’ll give it a try.

    F.

    Comment by SohoInteractive — January 15, 2010 @ 12:00 am

  112. Nice… the shadow effect especially looks superb.

    Comment by Glombiowski — January 15, 2010 @ 4:36 pm

  113. [...] View Tutorial [...]

    Pingback by Massive jQuery Tutorials And Plugins List – Webexpedition18 — January 25, 2010 @ 4:32 am

  114. [...] Javascript, Ajax links Ajaxrain.com Ajaxian.com Dynamicdrive.com Netzgesta.de Davidwalsh.name noupe.com Create a Realistic Hover Effect With jQuery [...]

    Pingback by Javascript, Ajax links « Comnuoc — February 3, 2010 @ 3:04 am

  115. Very nice and useful tutorials for web designers,
    Thanks for posting.

    Comment by Indialike — February 8, 2010 @ 6:17 am

  116. [...] Read full article » | Demo » | Download » [...]

    Pingback by Create a Realistic Hover Effect With jQuery :: Web Designer Notes — February 14, 2010 @ 10:23 pm

  117. Very nice tutorial for Web designers…but have you checked for the cross browser..? This is not working in IE6.

    Thanks for posting.

    Comment by rohit — February 19, 2010 @ 1:54 am

  118. [...] Realistic Hover Effect With jQuery | Demo [...]

    Pingback by jQuery buton Uygulamaları — February 23, 2010 @ 6:01 am

  119. [...] Realistic Hover Effect With jQuery | Demo [...]

    Pingback by jQuery buton Uygulamaları | hurriyetsondakika.net - Son Dakika, Güncel, Türkiye, Dünya — February 23, 2010 @ 12:33 pm

  120. [...] Realistic Hover Effect With jQuery | Demo [...]

    Pingback by jQuery buton Uygulamaları « Bay Bedava – Netten Başlıklar — February 24, 2010 @ 3:18 am

  121. That’s a great effect. I might use it in one of my upcoming themes. :)

    Comment by Benje — February 28, 2010 @ 2:02 pm

  122. [...] visit:  http://www.adrianpelletier.com for the original [...]

    Pingback by JQuery Bounce on Hover Buttons : Web Designer Ideas – Tutorials, Trends and Ideas — March 8, 2010 @ 7:13 am

  123. Coolz man, so wonderfull effects.

    Comment by Darto KLoning — March 11, 2010 @ 6:13 am

RSS feed for comments on this post. TrackBack URL

Leave a comment

Link Love

View the Latest

Recommended Reading