Question

我试图通过简单的线性转换使复选框更改为div模糊和unblur，我设法在Chrome上执行此操作。我现在想让它在Firefox，IE和Safari上运行，但我无法弄清楚如何做到这一点。

我正在使用的代码是：

Div将会模糊：

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

复选框：

<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，最好在CSS中以数据URI格式嵌入。 filter属性仅仅是更具特色的SVG过滤器的简写方法。

Firefox上的转换适当性

1 个答案: