IE 7+ 上的 Owl Carousel Fade 过渡答案

【问题标题】：Owl Carousel Fade transition on IE 7+IE 7+ 上的 Owl Carousel Fade 过渡
【发布时间】：2014-04-03 17:44:32
【问题描述】：

我在我的网站上使用了绝妙的 Owl Carousel，尤其是“褪色”效果。你可以在这里看到一个演示：http://www.owlgraphic.com/owlcarousel/demos/transitions.html

我的轮播图片在 Chrome 上“褪色”很好，但在 IE 上，它们“滑动”了。官网上是这样说的：

“重要！CSS3 过渡仅适用于支持 CSS3 translate3d 方法，并且仅在屏幕上显示单个项目。”

因此，我寻找了一个 hack 并发现了这个：

#monElement {
opacity: .4; /* for all modern webcrawlers */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* For IE6, IE7, and IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* IE8 only */
}

但是......它也不起作用。知道它可能是什么？

谢谢

【问题讨论】：

这不是关于 Web Ontology Language 的问题，不应该被标记为owl。

标签： jquery css internet-explorer

【解决方案1】：

使用 DXImageTransform 在 IE7+8（已弃用 9）上实现此效果还需要一些 Javascript。 MS Technet visual filters and transitions reference 提供了如何实现此目的的示例。显然，这些示例仅适用于 IE 7 或 8。

例如：

<script>
var bToggle = 0;
function fnToggle() {
    oDiv.filters[0].Apply();                   

    // After setting Apply, changes to the oDiv object 
    //  are not displayed until Play is called.
    if (bToggle) {                                                        
        bToggle = 0;
        oDiv.style.backgroundColor="gold";}
    else {
        bToggle = 1;
        oDiv.style.backgroundColor="blue";}  
    oDiv.filters[0].Play();
}
</script>

<button onclick="fnToggle()">Toggle Transition</button><br/><br/>

<div id="oDiv" style="height:250px; width:250px; background-color: gold;
                filter:progid:DXImageTransform.Microsoft.Fade( 
                duration=2);">
</div>

【讨论】：