title: Jquery Animate not working in ie9
body: <p>I have the following side submenu that appears on the left when the button is clicked on which works fine for chrome and firefox. However, for IE9, the transition is not working.</p>
  
  <p>An alternative I read is to use Jquery animate to replicate CSS3 transition. I did the following based on the documentation I read:</p>
  
  <pre><code>$('#menu-toggle').click(function() {
      $('#wrapper').animate({left:'256px'},600);
  });
  </code></pre>
  
  <p>The code above should only be applied if its IE9 or below. To do this, I did the following which works for css that is only targeting IE. The code block below is in the head tags:</p>
  
  <pre><code>&lt;!--- Sidebar Transition ---&gt;
  &lt;!--[if lte IE 9]&gt;
      &lt;script src="submenu_transition_ie.js"&gt;&lt;/script&gt;    
  &lt;![endif]--&gt;
  </code></pre>
  
  <p>sidebar menu:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  
      &lt;!--- Sidebar ---&gt;
      &lt;div id="sidebar-wrapper"&gt;
          &lt;ul class="sidebar-nav"&gt;
              &lt;li class="sidebar-brand"&gt;
                  &lt;a href="#"&gt;
                      Start Bootstrap
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Dashboard&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Shortcuts&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Overview&lt;/a&gt;
              &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Button that I use to get the sidebar menu to appear:</p>
  
  <pre><code>&lt;a href="#menu-toggle" class="btn btn-secondary" id="menu-toggle"&gt;Toggle Menu&lt;/a&gt;
  </code></pre>
  
  <p>I am not sure what I am doing wrong.</p>
  
  <p>Here are also the following js scripts I am using. Any help would be appreciated</p>
  
  <pre><code>&lt;!--- Bootstrap core JavaScript ---&gt;
      &lt;script src="http://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
      &lt;script src="vendor/jquery/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="vendor/bootstrap/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/submenu_transition.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>UPDATE:</strong> I was able to get the animate to work and mimic toggle. If anyone is interested, below is what I did. I know it isnt the most elegant, but works for IE9.</p>
  
  <pre><code>var ua = window.navigator.userAgent; //detects which browser user is on
  var msie = ua.indexOf("MSIE"); //if it is any version of IE
  
  if(msie &lt; 0){
      $("#menu-toggle").click(function(e) {
          e.preventDefault();
          $("#wrapper").toggleClass("toggled");
      });
  }
  
  //Mimic Toggle
  else{
      var mimicToggle = "expand";
      $(document).ready(function (){
          $("#menu-toggle").click(function(){
              //console.log(mimicToggle); //to check if button is clicked
  
              if(mimicToggle == "expand"){
                  $('#wrapper').animate({'padding-left':'250px'},600);
                  mimicToggle = "shrink";
              }
              else{
                  $('#wrapper').animate({'padding-left':'-250px'},600);
                  mimicToggle = "expand";
              }
  
          });
      });
  }
  </code></pre>