Question

Found a bug in IE (all versions), wondering if there is a workaround.

This is the bug in a very simple form using jsfiddle:

http://jsfiddle.net/9frpL/6/

In Internet Explorer:

1. Click “show”
2. Click “hide”
3. Click “show” again

Notice how the “hide” link is still in its hovered state? Sometimes it doesn’t happen if you move your mouse fast enough while the element is animating.

This bug doesn’t happen with the “blind” UI animation or the basic slideUp() method, but the “clip” UI animation is really what I need for the project I’m working on.

Thanks for taking a look, hope you can help!

Answer 1

Edit: Please check the below, even more uglier hack, DEMO here

$("#hide").bind('click', function(e) {

    $("#box").hide('clip', 'fast', function () {
        $('#hide').addClass('ieHax');    
    });
    e.preventDefault();

});

$('#hide').bind ('mouseenter', function (e) {
    $('#hide').removeClass('ieHax');
});

and CSS:

a.ieHax {
    color: #000 !important;
}

Original Ans:

One quick hack I could think of is to set the color to #000 in .hide callback,

$("#box").hide('clip', 'fast', function () {
    $('#hide').css('color', '#000'); /* Hax for IE */
});

Pleas note that this is not a proper solution.