title: Smooth out this jQuery toggle animation?
body: <p><strong>The animation produced</strong> by my jQuery function is shaky, and I've been looking through different SO solutions, such as adding jquery.easing, but no luck. Is the problem the iframes in each div?</p>
  
  <p>Any ideas on how to smooth out the animation? Is my basic toggle function the best way?</p>
  
  <p><strong>JSFiddle:</strong> <a href="http://jsfiddle.net/gwLcD/8/" rel="nofollow">http://jsfiddle.net/gwLcD/8/</a></p>
  
  <p><strong>The basic markup</strong> is below, and is repeated numerous times on the page (with blocks of text in between each "videotoggle" div):</p>
  
  <pre><code> &lt;div class="videotoggle"&gt;
  
      &lt;p&gt;&lt;h2 class="entry-title"&gt;View a few minutes of the (title) video &lt;/h2&gt;&lt;/p&gt;
  
      &lt;div class="videoblock"&gt;
  
      &lt;iframe width="560" height="315" src="http://www.youtube.com/embed/????????"
      frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
  
      &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>And the function:</strong></p>
  
  <pre><code>$(document).ready(function(){
  $(".videoblock").hide();  //closes all divs on first page load
  $(".entry-title").click(function() {
      $this = $(this);  //this next code only allows one open div at a time
      $content = $this.closest('.videotoggle').find(".videoblock");
      if (!$this.is('.active-title')) {
          $('.active-title').removeClass('active-title');
          $this.addClass('active-title');
          $(".videoblock:visible").slideToggle(400);  //slide toggle
          $content.slideToggle(400);
      }
  });
  });
  </code></pre>