фильтр: размытие для Mozilla Firefox <svg> не работает

Я занимаюсь разработкой страницы, которая будет анимировать изображение, затемнение в стиле размытия. Он работает в Google Chrome, но в Mozilla Firefox не сделалт.

Я пробую этот подход для Mozilla Firefox.http://css-plus.com/2010/05/how-to-add-a-gaussian-blur-effect-to-elements-within-firefox/ но изображения не были видны.

это мой код:

ЯШ:


$(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);
});

HTML:


    <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">



    
        
     

где я сделал не так? и как я могу сделать это правильно, чтобы анимация страницы Mozilla Firefox была одинаковой в Chrome.

заранее спасибо

Ответы на вопрос(2)

Ваш ответ на вопрос