title: How to limit this simple transition made by jQuery?
body: <p>I want to change the width of a division by clicking on the options I wrote above it, each time by 100px, using jQuery. But I want the width not to become lesser than 200px or more than 600px. How can I do it?</p>
  <pre><code>&lt;p id=&quot;increase&quot;&gt;
      Increase the width by 100px
  &lt;/p&gt;
  
  &lt;p id=&quot;reduce&quot;&gt;
      Reduce the width by 100px
  &lt;/p&gt;
  
  &lt;div id=&quot;box&quot;&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      $(&quot;#increase&quot;).click(function(){
          $(&quot;#box&quot;).animate({width: '+=100px'}, 1000);
      }); 
      $(&quot;#reduce&quot;).click(function(){
          $(&quot;#box&quot;).animate({width: '-=100px'}, 1000);
      });     
  &lt;/script&gt;
  </code></pre>