Question

I’m using the following function, called from document.ready(), to set a fadeIn/fadeOut effect on the top navigation of this page.

// Initialize the main menu's rollover behavior.
function initNavMenu(fadeInTime,fadeOutTime){
    $('#top-nav li').append('<div class="hover"></div>');

    $('#top-nav li').hover(
        function(){
            $(this).children('div').fadeIn(fadeInTime);
        },

        function(){
            $(this).children('div').fadeOut(fadeOutTime);
        }).click (function() {
            $('#top-nav li.selected').removeClass('selected');
            $(this).addClass('selected');
    });
}

It works well enough on FF 3.6.9, Chrome, Safari, and Opera. But on IE 8 (and probably lower versions), I get an ugly, smeared ink effect when I roll over the button. The smeared effect goes away once the fade is done. Anyone know what’s causing this?

Answer 1

Just see by Developer toolbar in IE after the control is visible due to fade effect it is adding some code for opacity. Just remove the piece of code by writing

$('selector').css('attribute', '');
or write 
$('selector').removeAttr('style'); // Removes all inline styles.

Hope this will help you 🙂