2

我正在尝试将来自 Liffect - Effect for Lists的漂亮动画效果列表包含到我的 ASP.NET 应用程序中。

<form id="form1" runat="server">
    <div>
        <ul effects="pageTop">
            <li>
                <img src="Images/1.jpeg" alt="Car" /></li>
            <li>
                <img src="Images/2.jpeg" alt="Car" /></li>
            <li>
                <img src="Images/3.jpeg" alt="Car" /></li>
        </ul>
    </div>
    <script type="text/javascript">            
        $(document).ready(function () {
            $("ul[effects] li").each(function (i) {
                $(this).attr("style", "-webkit-animation-delay:" + i * 300 + "ms;"
                        + "-moz-animation-delay:" + i * 300 + "ms;"
                        + "-o-animation-delay:" + i * 300 + "ms;"
                        + "animation-delay:" + i * 300 + "ms;");
                if (i == $("ul[effects] li").size() - 1) {
                    $("ul[effects]").addClass("play")
                }
            });
        });
    </script>
</form>

在这里你可以找到JS Fiddler。

挣扎了几个小时后，我刚刚注意到这是在工作，Firefox 16.x但不是在IE 9. 这似乎是某种CSS 3问题，但不确定到底哪里错了。请帮助使其完全跨浏览器兼容（IE，，Firefox等Chrome）

我也很感激让我知道一些用于跨浏览器兼容CSS 3hack 的好资源HTML 5。

4

3 回答 3

1

最好看看这个关于 jQuery Fallbacks 的 CSS3 动画：http: //msdn.microsoft.com/en-us/magazine/hh304380.aspx

还有http://modernizr.com/用于“跨浏览器兼容的 CSS 3 hacks for HTML 5”

于 2012-11-07T10:19:41.013 回答
0

您使用的任何 CSS 都是 CSS3 IE7 和 IE8 将不支持 css3 属性。

于 2012-11-07T10:15:11.460 回答
0

在 IE8 及更低版本中，您将无法获得对 CSS3 的任何支持。检查这个不错的参考，看看你想要使用的内容是否在主要浏览器中可用。

编辑您的上次更新：IE9 不支持动画

于 2012-11-07T10:16:34.977 回答