动态应用于多个元素时，CSS过滤器加载速度非常慢

Question

我正在尝试对元素应用灰度滤镜，以便在操作数据时使它们失去焦点。

我只是将一个类应用于所有相关元素，但是在将CSS过滤器加载到元素上时会有一个非常明显的挂起。

任何使这更快，更无滞后的想法？我想保留灰度效果，但它没有足够的响应。我尝试使用不同的CSS（例如opacity: 0.4;）来比较速度，它肯定是引起问题的CSS过滤器，而不是javascript。

这是相关的JS / CSS

JS：

$("#users li").draggable({
    revert: function(socketObj) {
        if (socketObj === false) {
            // Drop was rejected, revert the helper.
            $(".fc-event").removeClass("greyscale");
            return true;
        } else {
            // Drop was accepted, don't revert.
            return false;
        }
    },
    start: function( event, ui ) {
        $(".fc-event").each(function(index, element) {
            if(/* some condition is met */) {
                $(element).addClass("greyscale");
            }
        });
    }
});

CSS：

.greyscale {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}