title: Why do Images change quality after animation?
body: <p>I have a jquery image slider which slides images on a div ('class=container') on my webpage and a Logo image (in .png format) image found on a seperate div  ('id=logo').</p>
  
  <p>when the image slider slides the images on the '.container' div ,
  in other words when the image on top has been animated and the next image shows up</p>
  
  <p>the image on the #logo div magically loses its quality and even contains rugged edges almost as if it was originaly a low quality image</p>
  
  <p><a href="http://postimg.org/image/ru02maz5f/f9defe45" rel="nofollow">take a look here </a> 
  I don't know wether its the jquery causing this or if it is the css 
  i am using for the image . </p>
  
  <p>this is the jquery code I used for the sliding effect div.</p>
  
  <pre><code>$(document).ready( function(){
  
      $(".container &gt; div:gt(0)").hide();
      var count=0;
      setInterval(function() { 
         $('.container &gt; div:first')
            .animate({right:"110%"}) 
            .fadeOut(1000)
            .animate({right:"-110%"})
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('.container');                 
         },  4000);
  </code></pre>
  
  <p>});</p>
  
  <p>and this is the css of the logo div (the div that contains my logo.png image)</p>
  
  <pre><code>#logo{  opacity:0.8;        
      position:absolute;
      margin-left:36%;
      margin-top: -5px;
      width:300px;
      height:100px;
  } 
  
  #logo img{
  
       max-width: 400px;
       max-height: 200px;
  </code></pre>
  
  <p>}</p>