Question

Context

I use jQuery UI effects (slide and drop) to open and close a slide.

The following code works on Chrome, Firefox and IE 9.

On IE 7 and 8, I can open and close the slide only once. After the slide stays hidden.

Any idea to resolve that?

• jQuery : 1.8.0/1.8.1
• jQuery UI : 1.8.23

Code + JSFiddle

// Opens a slide
$('a[data-toggle="slide"]').click(function (e) {
    e.preventDefault(); 

    currentSlide = $(this).attr('href');

    $(currentSlide).show('slide', { direction: 'right' }, _config.effectDuration);
    $('div.modal-backdrop').fadeIn(_config.effectDuration);
});

// Closes the current slide
$('div.modal-backdrop, button.close').click(function () {
    $(currentSlide).hide('drop', { direction: 'right' }, _config.effectDuration);
    $('div.modal-backdrop').fadeOut(_config.effectDuration);
});

Answer 1

The inline style of the slider (on the second time it shows) is the following in IE8 (compatible mode from IE9):

zoom: 1; filter:  alpha(opacity=0); display: block;

Which means that it’s the filter that sets the opacity to 0 that is the culprit.