title: jquery animate complete
body: <pre class="lang-js prettyprint-override"><code>&lt;div class=&quot;factuuradres&quot;&gt;&lt;/br&gt;&lt;h3&gt;&lt;/h3&gt;&lt;/div&gt;
  &lt;div class=&quot;factuuradresbutton&quot;&gt;Meer Informatie&lt;/div&gt;           
  
  &lt;script type=&quot;text/javascript&quot;&gt;
      $(&quot;.factuuradresbutton&quot;).toggle(function(){
          $(&quot;.factuuradres&quot;).animate({
              height: &quot;310px&quot;
          }, 500 );
          complete: function() {
              $(&quot;.factuuradresbutton&quot;).html(&quot;Toch geen factuuradres&quot;)
              $(&quot;.factuuradres&quot;).html('&lt;h2&gt;Factuuradres&lt;/h2&gt;&lt;div class=&quot;title_textbox3&quot;&gt;&lt;h3&gt;Postcode:&lt;/h3&gt;&lt;/div&gt;&lt;div class=&quot;textbox3&quot;&gt;&lt;input type=&quot;text&quot; class=&quot;postcode&quot; name=&quot;Postcode&quot; value=&quot;&quot;/&gt;&lt;/div&gt;&lt;div class=&quot;title_textbox4&quot;&gt;&lt;h3&gt;Huisnummer:&lt;/h3&gt;&lt;/div&gt;&lt;div class=&quot;textbox4&quot;&gt;&lt;input type=&quot;text&quot; class=&quot;huisnummer&quot; name=&quot;Huisnummer&quot; value=&quot;&quot;/&gt;&lt;/div&gt;&lt;div class=&quot;title_textbox&quot;&gt;&lt;h3&gt;Straat:&lt;/h3&gt;&lt;/div&gt;&lt;div class=&quot;textbox&quot;&gt;&lt;input type=&quot;text&quot; class=&quot;field&quot; name=&quot;Straat&quot; value=&quot;&quot;/&gt;&lt;/div&gt;&lt;div class=&quot;title_textbox&quot;&gt;&lt;h3&gt;Plaats:&lt;/h3&gt;&lt;/div&gt;&lt;div class=&quot;textbox&quot;&gt;&lt;input type=&quot;text&quot; class=&quot;field&quot; name=&quot;Plaats&quot; value=&quot;&quot;/&gt;&lt;/div&gt;')
          }
      },
  
      function(){
          $(&quot;.factuuradres&quot;).animate({
              height: &quot;160px&quot;
          }, 500 );
          $(&quot;.factuuradresbutton&quot;).html(&quot;Ander factuuradres?&quot;)
          $(&quot;.factuuradres&quot;).html(&quot;Factuuradres&quot;)
      });
  &lt;/script&gt;
  </code></pre>
  <p>I'm wondering why the <code>complete: function()</code> is not working, anyone who can give me advice?</p>
  <p>Also this is the working script, but it breaks once you click on the button. After an second or two it works like intended.</p>
  <pre class="lang-js prettyprint-override"><code>&lt;script type=&quot;text/javascript&quot;&gt;
      $(&quot;.factuuradresbutton&quot;).toggle(function(){
      $(&quot;.factuuradres&quot;).animate({
          height: &quot;610px&quot;
      }, 500 );
      $(&quot;.factuuradresbutton&quot;).html(&quot;Toch geen factuuradres&quot;)
      $(&quot;.factuuradres&quot;).html('&lt;h2&gt;Factuuradres&lt;/h2&gt;&lt;div class=&quot;title_textbox3&quot;&gt;&lt;h3&gt;Postcode:&lt;/h3&gt;&lt;/div&gt;&lt;div class=&quot;textbox3&quot;&gt;&lt;input type=&quot;text&quot; class=&quot;postcode&quot; name=&quot;Postcode&quot; value=&quot;&quot;/&gt;&lt;/div&gt;&lt;div class=&quot;title_textbox4&quot;&gt;&lt;h3&gt;Huisnummer:&lt;/h3&gt;&lt;/div&gt;&lt;div class=&quot;textbox4&quot;&gt;&lt;input type=&quot;text&quot; class=&quot;huisnummer&quot; name=&quot;Huisnummer&quot; value=&quot;&quot;/&gt;&lt;/div&gt;&lt;div class=&quot;title_textbox&quot;&gt;&lt;h3&gt;Straat:&lt;/h3&gt;&lt;/div&gt;&lt;div class=&quot;textbox&quot;&gt;&lt;input type=&quot;text&quot; class=&quot;field&quot; name=&quot;Straat&quot; value=&quot;&quot;/&gt;&lt;/div&gt;&lt;div class=&quot;title_textbox&quot;&gt;&lt;h3&gt;Plaats:&lt;/h3&gt;&lt;/div&gt;&lt;div class=&quot;textbox&quot;&gt;&lt;input type=&quot;text&quot; class=&quot;field&quot; name=&quot;Plaats&quot; value=&quot;&quot;/&gt;&lt;/div&gt;')
      },
      function(){
      $(&quot;.factuuradres&quot;).animate({
          height: &quot;160px&quot;
      }, 500 );
      $(&quot;.factuuradresbutton&quot;).html(&quot;Ander factuuradres?&quot;)
      $(&quot;.factuuradres&quot;).html(&quot;Factuuradres&quot;)
      });
  &lt;/script&gt;
  </code></pre>