фильтр: размытие для 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.
заранее спасибо