title: Add transition on window resize
body: <p>I am trying to create responsive layout for my website.</p>
  
  <p>This is what i am trying to do-</p>
  
  <p><img src="https://i.stack.imgur.com/juqEo.png" alt="enter image description here"></p>
  
  <p>While i am re-sizing window , window's width is reducing by 100 pixels only from right side of document. I want it to be happen on all sides of this box.</p>
  
  <p>At the same time when i am re-sizing window i want to add transitions on this block. 
  But transition works with properties assigned within css. </p>
  
  <p>How can i add transitions with window size ?</p>
  
  <p><strong>css-</strong></p>
  
  <pre><code>.box
  {
      height:100%;
      width:100%;
      border:2px solid #ccc;
      position:absolute;
  }
  .box-narrow
  {
      -webkit-transition:all .6s ease-in-out;
      transition:all .6s ease-in-out;
      -moz-transition: all .6s ease-in-out;
  }
  </code></pre>
  
  <p><strong>jQuery-</strong></p>
  
  <pre><code>$(function(){
     var windowwi=$(window).width();
  windowwi-=100;
      $(window).on('resize',function(){
          $('.box').width(windowwi);
          $('.box').addClass(
      });
  });
  </code></pre>
  
  <h2><a href="http://jsfiddle.net/GUbYg/" rel="nofollow noreferrer">Fiddle</a></h2>