Фильтр: Blur Firefox Issue

Question

Я попытался добавить эффект размытия на изображение + текст, эффекты на клик на Java.

Он отлично работает в хромированном и сафари.

Но у меня не было шансов получить этот эффект в firefox.

Код:

$('.newsletter').click(function(){ 
    $(".overlay_newsletter").fadeIn(); 

    $(".name, li, .newsletter, svg, .header-links").css({ 
      '-webkit-filter': 'blur(3px)', 
      'filter': 'blur(3px)', 
      '-moz-filter': 'blur(3px)'}); 

    $(".menu-expand").css({ 
      '-webkit-filter': 'blur(8px)', 
      'filter': 'blur(8px)', 
      '-moz-filter': 'blur(8px)', 
      'opacity':'0.5'}); 

    $(".logo").css({ 
      '-webkit-filter': 'blur(8px)', 
      'filter': 'blur(8px)', 
      '-moz-filter': 'blur(8px)'}); 
    }); 

Надежда кто-то может помочь мне здесь :)

Answer 1

вы должны установить правила без префикса последнего.

$('.newsletter').click(function(){ 
    $(".overlay_newsletter").fadeIn(); 

    $(".name, li, .newsletter, svg, .header-links").css({ 
     '-webkit-filter': 'blur(3px)', 
     '-moz-filter': 'blur(3px)', 
     'filter': 'blur(3px)'}); 

$(".menu-expand").css({ 
     '-webkit-filter': 'blur(8px)', 
     '-moz-filter': 'blur(8px)', 
     'filter': 'blur(8px)', 
     'opacity':'0.5'}); 

$(".logo").css({ 
     '-webkit-filter': 'blur(8px)', 
     '-moz-filter': 'blur(8px)', 
     'filter': 'blur(8px)'}); 

});

Помимо старой версии FF требуется svg, чтобы применить эффект размытия. https://developer.mozilla.org/en/docs/Web/CSS/filter

Answer 2

Я попытался это

filter: url("data:image/svg+xml;utf9,<svg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'><filter%20id='blur'><feGaussianBlur%20stdDeviation='2'%20/></filter></svg>#blur"); 

Он отлично работает в FF, но есть способ, чтобы вызвать это в JQuery на событие щелчка?