0

画像をアニメーション化し、ぼかしスタイルでフェードインするページを開発しています。グーグルクロームでは動作しますが、モジラファイアフォックスでは動作しませんでした。

私はこのアプローチをMozillaFirefoxで試します。http://css-plus.com/2010/05/how-to-add-a-gaussian-blur-effect-to-elements-within-firefox/しかし、画像は表示されませんでした。

これは私のコードです：

js：

<script type="text/javascript">
$(document).ready(function() {
    $("img").css({
        "filter": "blur(4px)", 
        "-webkit-filter": "blur(4px)", 
        "-moz-filter": "blur(4px)",
        "-o-filter": "blur(4px)",
        "-ms-filter": "blur(4px)",
        "filter":"url('#blur1')"
    });
    window.setTimeout(function() {
        $("img").css({
            "filter": "blur(3px)", 
            "-webkit-filter": "blur(3px)", 
            "-moz-filter": "blur(3px)",
            "-o-filter": "blur(3px)",
            "-ms-filter": "blur(3px)",
            "filter":"url('#blur1')"
        });
    }, 3000);
    window.setTimeout(function() {
        $("img").css({
            "filter": "blur(2px)", 
            "-webkit-filter": "blur(2px)", 
            "-moz-filter": "blur(2px)",
            "-o-filter": "blur(2px)",
            "-ms-filter": "blur(2px)",
            "filter":"url('#blur1')"
        });
    }, 3100);
    window.setTimeout(function() {
        $("img").css({
            "filter": "blur(1.5px)", 
            "-webkit-filter": "blur(1.5px)", 
            "-moz-filter": "blur(1.5px)",
            "-o-filter": "blur(1.5px)",
            "-ms-filter": "blur(1.5px)",
            "filter":"url('#blur1')"
        });
    }, 3200);
    window.setTimeout(function() {
        $("img").css({
            "filter": "blur(1px)", 
            "-webkit-filter": "blur(1px)", 
            "-moz-filter": "blur(1px)",
            "-o-filter": "blur(1px)",
            "-ms-filter": "blur(1px)",
            "filter":"url('#blur1')"

        });
    }, 3300);
    window.setTimeout(function() {
        $("img").css({
            "filter": "", 
            "-webkit-filter": "", 
            "-moz-filter": "",
            "-o-filter": "",
            "-ms-filter": "",
            "filter":"url('#blur1')"
        });
    }, 3400);
    $("#promoIMG").fadeIn(5000);
});
</script>

html：

<div id="promoIMG">
    <a href="main.php"><img src="images/akb1.png" alt="" onMouseOver="this.src='images/akb2a.png'" onMouseOut="this.src='images/akb1.png'"/></a><br/>
    <img src="images/akb2.png" alt="AKB" />
</div>
</div>
<svg>
    <filter id="blur1">
        <svg:feGaussianBlur stdDeviation="1"/>
     </filter>
</svg>

どこで間違ったの？そして、どうすればそれを修正して、mozillafirefoxのページアニメーションがクロムで同じになるようにすることができますか。

前もって感謝します

4

2 に答える 2

0

わかった、これを追加する

<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="blur1">
        <svg:feGaussianBlur stdDeviation="1"/>
     </filter>
</svg>
于 2013-01-30T10:46:26.697 に答える
0

同じ問題がありました。画像が表示されない（@kidwonのjsbinと同様）。svgスニペットを外部ファイルに配置し、を介してロードすることで解決しました

filter: url("/blur.svg#blur");

cssで。QUOTED、なしでは動作しませんでした。

于 2014-03-16T13:17:55.090 に答える