InternetExplorer7 8:jQuery UI效果只起作用一次

Internet Explorer 7 8 : jQuery UI effects work only once

本文关键字：起作用 一次 jQuery UI InternetExplorer7      更新时间：2023-09-26

上下文

我使用jQuery UI效果（slide和drop）来打开和关闭幻灯片。

以下代码适用于Chrome、Firefox和IE 9。

在IE 7和8上，我只能打开和关闭幻灯片一次。幻灯片保持隐藏后。

有解决这个问题的办法吗？

  • jQuery：1.8.0/1.8.1
  • jQuery UI:1.8.23

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

滑块的内联样式（第二次显示时）在IE8中如下（与IE9兼容的模式）：

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

这意味着，将不透明度设置为0的过滤器才是罪魁祸首。

在Henrik Ammer的帮助下，解决方案：

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