悬停时不透明度的动画变化在 Internet Explorer 中不起作用

Posted 2023-05-08

【中文标题】悬停时不透明度的动画变化在 Internet Explorer 中不起作用

【英文标题】：Animated change of opacity on hover is not working in Internet Explorer

【发布时间】：2012-10-05 08:38:01

【问题描述】：

我想简单地在滑块内缓慢更改每个项目的不透明度，除了我悬停的项目。它在 chrome 中完美运行，但在 Internet Explorer 8 和 7 中却无法运行。

这里是html代码：

        <div id="carousel-image-and-text" class="touchcarousel carousel-image-and-text clearfix" style="overflow: visible; ">
            <div class="touchcarousel-wrapper grab-cursor">
                <ul id="weekly-promos" class="touchcarousel-container" style="width: 1420px; left: 0px; ">
                    <asp:Repeater ID="RList" runat="server">
                        <ItemTemplate>
                            <li class="touchcarousel-item">
                                <a class="item-block" href="Article.aspx?PageID=<%# Eval("PageID") %>" rel="tooltip-<%# Eval("PageID") %>">
                                <figure><img src="<%# SetConf(Eval("PageID").ToString(),false) %><%# Eval("VisualSource") %>"></figure>
                                </a>
                            </li>
                        </ItemTemplate>
                    </asp:Repeater>
                </ul>
            </div>

这里是javascript部分：

 $(".carousel-slider a img").hover(function () 
            $(".carousel-slider img").not(this).stop().animate( opacity: '0.4', filter: 'alpha(opacity=40)' , 1000);

        , function () 
            $(".carousel-slider img").not(this).stop().animate( opacity: '1.0', filter: 'alpha(opacity=100)' , 1000);
        );

【参考方案1】：

不使用过滤器，只使用不透明度：

$(".carousel-slider a img").hover(function () 
  $(".carousel-slider img").not(this).stop().animate( opacity: 0.4 , 500);
, function () 
  $(".carousel-slider img").not(this).stop().animate( opacity: 1.0 , 500);
);