Приоритет перехода на Firefox

Question

Я пытаюсь сделать размытие div и развязать при изменении флажка простым линейным переходом, и мне удалось это сделать в Chrome. Теперь я хочу, чтобы он работал либо на Firefox, IE и Safari, но я не могу понять, как это сделать.

код я использую:

Div, которые будут размыты:

<div class="foo" style="transition-property: all;transition-duration: 350ms;transition-timing-function: linear;"> 
... 
</div> 

Checkbox:

<input type="checkbox" value="Check Me" class="check"> Check me 

JavaScript функция:

function blurElement(element, size) { 
    var filterVal = 'blur('+size+'px)'; 
    $(element) 
     .css('filter',filterVal) 
     .css('webkitFilter',filterVal) 
     .css('mozFilter',filterVal) 
     .css('oFilter',filterVal) 
     .css('msFilter',filterVal); 
} 

JQuery:

$(function() { 
    $('.check').change(function() { 
     if ($('.check').prop("checked")) { 
      blurElement(".foo",3); 
     } 
     else { 
      blurElement(".foo",0); 
     } 
    }); 
}); 

Любые идеи? Это работает отлично на Chrome, но никаких признаков жизни в других браузерах не :(

Заранее спасибо!

Answer 1

Firefox не поддерживает filter собственность еще. Это уже близко к реализуемой мысли, и мы должны будем надеяться см поддержки в течение нескольких месяцев. Bug 869828 отслеживает последние необходимые шаги.

до тех пор, вы можете использовать SVG filters, предпочтительно встроенный в формате данные URI в вашем CSS. свойство filter кстати только сокращенный метод к более функциональные фильтры SVG.