title: fadeToggle animation not acting as expected while fading in
body: <p>I'm using fadeToggle in my meteor project to fade some buttons in and out on click. It seems to be working fine while fading out, but while fading in the animation "flickers" and it looks like the animation is done twice. I have already tried to clear the animationqueue so that doesn't seem to be the problem.</p>
  
  <p><a href="http://i.stack.imgur.com/NJVcH.gif" rel="nofollow">gif of what goes wrong</a></p>
  
  <p>here's the jquery I'm using:</p>
  
  <pre><code>$("#editBtn").click(function () {       
      $('.deletebtn').fadeToggle(400, false);
      $('.addbtn').fadeToggle(400, false);
      if ($("#editBtn").text() == "Edit") {
          $("#editBtn").text("Finish");
      } else {
          $("#editBtn").text("Edit");
      }
  });
  </code></pre>
  
  <p>the html from the button to trigger the action:</p>
  
  <pre><code>&lt;li&gt;&lt;a id="editBtn" class="waves-effect waves-light btn resizebtn amber darken-2" href="#"&gt;Edit&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>the html from the buttons to fade in/out: </p>
  
  <pre><code>&lt;a class="btn-floating waves-effect waves-light amber darken-2 deletebtn right"&gt;&lt;i class="material-icons deleteico"&gt;close&lt;/i&gt;&lt;/a&gt;
  &lt;a class="btn-floating btn-large waves-effect waves-light amber darken-2 addbtn"&gt;&lt;i class="material-icons"&gt;add&lt;/i&gt;&lt;/a&gt;
  </code></pre>
  
  <p>I'm using chrome btw.</p>
  
  <p>Thanks in advance!</p>