Internet Explorer 7 8: gli effetti dell’interfaccia utente jQuery funzionano una sola volta

Contesto

Uso gli effetti dell’interfaccia utente jQuery ( slide e drop ) per aprire e chiudere una diapositiva.

Il seguente codice funziona su Chrome, Firefox e IE 9.

Su IE 7 e 8, posso aprire e chiudere la diapositiva solo una volta. Dopo che la diapositiva rimane nascosta.

Qualche idea per risolverlo?

  • jQuery: 1.8.0 / 1.8.1
  • Interfaccia utente di jQuery: 1.8.23

Codice + 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); }); 

Lo stile in linea del cursore (la seconda volta che viene visualizzato) è il seguente in IE8 (modalità compatibile da IE9):

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

Il che significa che è il filtro che imposta l’opacità a 0 che è il colpevole.

Con l’aiuto di Henrik Ammer, la soluzione:

 $(currentSlide) .show('slide', { direction: 'right' }, _config.effectDuration) .css({ '-ms-filter':'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)', 'filter':'alpha(opacity=100)'});