фильтр: размытие для 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/ но изображения не были видны.
это мой код:
ЯШ:
<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>
где я сделал не так? и как я могу сделать это правильно, чтобы анимация страницы Mozilla Firefox была одинаковой в Chrome.
заранее спасибо