Comments on: How To Create an Animated Navigation with jQuery http://www.devirtuoso.com/2009/07/how-to-create-an-animated-navigation-with-jquery/ Web Development Wickedness Fri, 11 Dec 2009 12:28:24 -0500 http://wordpress.org/?v=2.8 hourly 1 By: Shawn http://www.devirtuoso.com/2009/07/how-to-create-an-animated-navigation-with-jquery/comment-page-1/#comment-208 Shawn Fri, 24 Jul 2009 12:04:46 +0000 http://www.devirtuoso.com/?p=726#comment-208 Thank you James. Fantastic Idea. I'll have to use that for the next navigation I do. Thank you James. Fantastic Idea. I’ll have to use that for the next navigation I do.

]]> By: James Hare http://www.devirtuoso.com/2009/07/how-to-create-an-animated-navigation-with-jquery/comment-page-1/#comment-207 James Hare Fri, 24 Jul 2009 11:50:55 +0000 http://www.devirtuoso.com/?p=726#comment-207 <a href="#comment-204" rel="nofollow">@B. Moore</a> didn't read your post before I posted mine - see my main post for a proposed fix to the flicker issue! Cheers, James @B. Moore
didn’t read your post before I posted mine – see my main post for a proposed fix to the flicker issue!

Cheers,
James

]]> By: Shawn http://www.devirtuoso.com/2009/07/how-to-create-an-animated-navigation-with-jquery/comment-page-1/#comment-206 Shawn Fri, 24 Jul 2009 11:50:51 +0000 http://www.devirtuoso.com/?p=726#comment-206 Definitely, you just need to preload your images. Here is an article on doing just that: <a href="http://www.devirtuoso.com/2009/07/creating-a-css-image-preloader/" rel="nofollow">Creating a CSS Image Preloader</a> Definitely, you just need to preload your images. Here is an article on doing just that: Creating a CSS Image Preloader

]]> By: James Hare http://www.devirtuoso.com/2009/07/how-to-create-an-animated-navigation-with-jquery/comment-page-1/#comment-205 James Hare Fri, 24 Jul 2009 11:49:36 +0000 http://www.devirtuoso.com/?p=726#comment-205 Really simple yet useful post as usual - keep it up! I've only just found this feed and your tutorials have already helped me in a number of situations. In looking at your breakdown of images/css - it occured to me that you are using css 'sprites' to minimise the amount of images you have. One further optimisation would be to extend that so that one image covered both the hover and normal states, changing the horizontal alignment as required. This would get rid of the dreaded 'flicker' you sometimes get when introducing an image on :hover in IE, and I reckon the consolidated image would have a smaller footprint than the two distinct images. I use the technique on a lot of sites I develop, let me know if you want to see some examples. That said, it *would* make your css more cluttered, so I suppose it keeps the tutorial more accessible to use two images and change image on :hover. Anyway, keep up the good work! James Really simple yet useful post as usual – keep it up! I’ve only just found this feed and your tutorials have already helped me in a number of situations.

In looking at your breakdown of images/css – it occured to me that you are using css ’sprites’ to minimise the amount of images you have. One further optimisation would be to extend that so that one image covered both the hover and normal states, changing the horizontal alignment as required. This would get rid of the dreaded ‘flicker’ you sometimes get when introducing an image on :hover in IE, and I reckon the consolidated image would have a smaller footprint than the two distinct images. I use the technique on a lot of sites I develop, let me know if you want to see some examples.

That said, it *would* make your css more cluttered, so I suppose it keeps the tutorial more accessible to use two images and change image on :hover.

Anyway, keep up the good work!

James

]]> By: B. Moore http://www.devirtuoso.com/2009/07/how-to-create-an-animated-navigation-with-jquery/comment-page-1/#comment-204 B. Moore Fri, 24 Jul 2009 06:52:28 +0000 http://www.devirtuoso.com/?p=726#comment-204 any way to get rid of the flicker on the first attempt to hover over the menu. Flicker is gone after the first attempt. any way to get rid of the flicker on the first attempt to hover over the menu. Flicker is gone after the first attempt.

]]>