Javascript 为什么动画制作后图像的质量会发生变化？

我有一个jquery图像滑块，可以在我的网页上的div'class=container'上滑动图像，在单独的div'id=Logo'上可以找到一个.png格式的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);

})

这是logo div的css，这个div包含了我的logo.png图像

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

#logo img{

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

---

}

请创建一个沙盒演示，复制问题。此处提供的信息不足，请重新阅读。我认为现在更容易理解了。请提供一个JSFIDLE或一个包含您正在使用的图像的片段来演示问题。请在此处查看此图像[link]，您可以用FIDLE重新创建吗。另外，您的设置宽度，原始图像尺寸是多少？