title: Dynamic width animation based in CSS Media Query
body: <p>I have two divs:</p>
  
  <pre><code>&lt;div class="map-ctn"&gt;&lt;/div&gt;
  &lt;div class="list-ctn"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And the Media Queries:</p>
  
  <pre><code>@media only screen and (min-width: 1281px) and (max-width : 1824px) {
      .map-ctn { width: 80%; }
      .list-ctn { width: 20%; }
  }
  
  @media only screen and (min-width: 961px) and (max-width : 1280px) 
  {
      .map-ctn { width: 75%; }
      .list-ctn { width: 25%; }
  }
  </code></pre>
  
  <p>I want to start the .list-ctn div with 0% and the .map-ctn with 100% and animate the .list-ctn do X% and .map-ctn to Z% based on the Media Query active.</p>
  
  <p>EDIT:</p>
  
  <p>The animation should occur on a jQuery event (form submit).</p>
  
  <p>So maybe I need to control the divs using jQuery but using the Média Query info to animate the width based on the width of each div.</p>
  
  <p>It has to work from IE9+, Safari, Chrome and Firefox.</p>