为什么动画后图像会改变质量？

Question

我有一个jquery图像滑块，可在网页上的div上滑动图像（“ class = container”），在单独的div上找到徽标图像（.png格式）图像（“ id = logo”）。

当图像滑块在'.container'div上滑动图像时，换句话说，当顶部的图像已设置动画并且下一张图像出现时

#logo div上的图像会神奇地失去质量，甚至包含粗糙的边缘，几乎就像是原始的低质量图像

看看这里，我不知道是否是导致这个问题的jQuery，或者它是否是我用于图像的CSS。

这是我用于滑动效果div的jquery代码。

$(document).ready( function(){

    $(".container > div:gt(0)").hide();
    var count=0;
    setInterval(function() { 
       $('.container > div:first')
          .animate({right:"110%"}) 
          .fadeOut(1000)
          .animate({right:"-110%"})
          .next()
          .fadeIn(1000)
          .end()
          .appendTo('.container');                 
       },  4000);

}）;

这是徽标div（包含我的logo.png图像的div）的css

#logo{  opacity:0.8;        
    position:absolute;
    margin-left:36%;
    margin-top: -5px;
    width:300px;
    height:100px;
} 

#logo img{

     max-width: 400px;
     max-height: 200px;

}