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 Responses to “jQuery simple roolover fade in/out navigation”


  • 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?

  • @Philip, working fine for me, even on iphone :)
    guess u have old ie?

Leave a Reply