CODEWITHSUNDEEP
jqueryinternet-explorereffects
Alex
Alex

Reputation: 35781

IE has trouble with jQuery fadeIn/fadeOut

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?

Upvotes: 1

Views: 313

Answers (1)

Deviprasad Das
Deviprasad Das

Reputation: 4353

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 :)

Upvotes: 1

Related Questions