Javascript .addClass导致FireFox中出现flash

下面的js块淡入另一个div中的图像，然后向第一个图像添加模糊：

$('img.bg').load(function() {
   $(this).fadeIn(400,function(){
      $('div.foo').fadeIn(800, function() { 
        $('img.bg').addClass('blur');
   });  
  });
});

模糊类如下所示：

.blur {  
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);

-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;  
transition: all 0.25s ease-out;
/*Firefox*/
filter: url(blur.svg#blur) 
}

除了添加svg blur类时Firefox中的图像闪烁外，其他一切都很好。所有其他浏览器都很酷。有没有避免这种情况的策略

以下是SVG：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <filter id="blur">
    <feGaussianBlur stdDeviation="2" />
  </filter>
</svg>

你能做一把小提琴吗？Firefox正在使用SVG过滤器，我怀疑transition属性不适用。您可能必须在过滤器本身中使用SMIL。我开始做一些修改，但不确定将SVG代码放在何处，因为它当前位于文件中。