.addClass在FireFox中导致flash

Question

以下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>