jQuery simple roolover fade in/out navigation

Was playing with jQuery couple of days, remember me old good as2 :)
Building simple rollover navigation with fade in/out is pretty simple.
Example is done based on the image ( click to open in the new window ):

jQuery simple navigation

[JS]
$(document).ready(function()
{
$(‘.navigation li a’).append(‘‘)
$(‘.navigation li a’).hover(function() {
$(‘.hover’, this).stop().animate({
‘opacity': 1
}, 1000)

},function() {
$(‘.hover’, this).stop().animate({
‘opacity': 0
}, 1000)

})
})
[/JS]

Bookmark and Share

2 thoughts on “jQuery simple roolover fade in/out navigation

  1. Philip Gill

    In Internet Explorer, using this implementation, on the page load/refresh, backgrounds for links are initially displayed in “hover” state. Mousing over each link the first time fixes the problem for the time, until the page is reloaded.

    Any clues/fixes?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>