CODEWITHSUNDEEP
jquerygoogle-chromeinternet-explorer-8fade
learningtech
learningtech

Reputation: 33673

Fade In and Fade Out issue with jQuery on IE8

I'm doing a fade in and fade out on a button with jquery. See it here: http://evermight.com/test .

How come the hover states transition nicely in Google Chrome but not in IE8? In IE8, a single hover may trigger multiple transitions/fades. How do I force IE8 to render the button events just like in Google Chrome?

Upvotes: 1

Views: 694

Answers (2)

Steve Robbins
Steve Robbins

Reputation: 13812

Use .stop() and .animate()

$('.btn-rollover .text').hover(

function() {
    $(this).closest('.btn-rollover').find('.overlay').stop().animate({opacity: 0.0}, 500);
}, function() {
    $(this).closest('.btn-rollover').find('.overlay').stop().animate({opacity: 0.8}, 500);
});

Demo http://jsfiddle.net/tfspz/

Upvotes: 1

Jasper
Jasper

Reputation: 75993

Use the mouseenter and mouseleave events rather than mouseover/mouseout.

jQuery(document).ready(function($) {
    $('.btn-rollover .text').bind('mouseenter', function(){
        $(this).closest('.btn-rollover').find('.overlay').stop().fadeOut();
    }).bind('mouseleave', function(){
        $(this).closest('.btn-rollover').find('.overlay').stop().fadeIn();
    });

});

Notice I also added .stop() just before the animation calls (.fadeOut() and .fadeIn()). This will stop the current animation before calling the next. Rather than queuing animations up one after another, the currently running animation will be stopped and the new one will commence immediately.

Upvotes: 0

Related Questions