title: jQuery animate a floating div
body: <p>I'm trying to create a fade-in animation for a div. The idea is to move div from right to left and fade-in. Because of the layout, the div is floated right above a certain window width (i.e. 501px) and left below (500px). </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="animated"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>@media only screen and (min-width:501px)
  {
      #animated {
          float:right;
      }
  }
  
  @media only screen and (max-width:500px) 
  {
      #animated {
          float:left;
      }
  }
  </code></pre>
  
  <p>When div is floated right everything works fine, but when floating property is set to left the movement stops working. How can I change my script to achieve the movement with a <strong><em>unique</em></strong> code, independently from floating property and CSS breaking points? Thanks in advance.</p>
  
  <p><a href="http://jsfiddle.net/3L93z/" rel="nofollow"><strong>Fiddle</strong></a></p>