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 3のあるHTML 5.

4

3 に答える 3

1

jQuery フォールバックを使用した CSS3 アニメーションについては、こちらをご覧ください: http://msdn.microsoft.com/en-us/magazine/hh304380.aspx

また、http://modernizr.com/では、「HTML 5 のクロスブラウザー互換 CSS 3 ハック」について説明しています。

于 2012-11-07T10:19:41.013 に答える
0

IE8 以下では、CSS3 をサポートしていません。この素敵なリファレンスをチェックして、使用したいものが主要なブラウザーで利用できるかどうかを確認してください。

最後の更新に編集: アニメーションは IE9 ではサポートされていません

于 2012-11-07T10:16:34.977 に答える
0

使用した CSS は CSS3 です。IE7 と IE8 は css3 プロパティをサポートしません。

于 2012-11-07T10:15:11.460 に答える