title: How can I make make css transition happen when applying width through javascript
body: <p>I am using telerik controls to build a simple form. </p>
  
  <p>The form will have 3 buttons.</p>
  
  <ol>
  <li>100 Dollar Button</li>
  <li>50 Dollar Button</li>
  <li>Other button</li>
  </ol>
  
  <p>The first and second button are actual RadButtons </p>
  
  <pre><code>    &lt;telerik:RadButton ID="Donate100" runat="server" Text="$100" Width="70" CssClass="" Visible="true" OnClick="Donate100_Click"&gt;&lt;/telerik:RadButton&gt;
      &lt;telerik:RadButton ID="Donate50" runat="server" Text="$50" Width="70" CssClass="" Visible="true" OnClick="Donate50_Click"&gt;&lt;/telerik:RadButton&gt;
  </code></pre>
  
  <p>And the third 'button' is just an input box that is styled to look like a button</p>
  
  <pre><code>&lt;telerik:RadNumericTextBox ID="Other" Width="70" runat="server" Type="Currency" DisplayText="Other" Visible="true" OnTextChanged="Other_TextChanged"&gt;
      &lt;ClientEvents OnFocus="Focus" /&gt;
  &lt;/telerik:RadNumericTextBox&gt;
  </code></pre>
  
  <p>When the user focuses on the 'other button' I call a javascript function that expands the width of the button. </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function Focus(sender, eventArgs) {
  
          document.getElementById("Other_wrapper").style.width = "400px";
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>This works perfectly. The only thing that I'm missing is how to do the transition. I'd like it to take 1.5 seconds to transition from the shorter width of 70px to 400px.</p>
  
  <p>Does this need to be done via switching the css class? Instead of setting width manually with javascript? Or can I somehow add the transistion to my javascript function. The latter would be ideal. </p>