Question

The animation produced 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?

Any ideas on how to smooth out the animation? Is my basic toggle function the best way?

JSFiddle: http://jsfiddle.net/gwLcD/8/

The basic markup is below, and is repeated numerous times on the page (with blocks of text in between each “videotoggle” div):

 <div class="videotoggle">

    <p><h2 class="entry-title">View a few minutes of the (title) video </h2></p>

    <div class="videoblock">

    <iframe width="560" height="315" src="http://www.youtube.com/embed/????????"
    frameborder="0" allowfullscreen></iframe>

    </div></div>

And the function:

$(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);
    }
});
});

Answer 1

Andrew’s solution is correct, but I would still put the css like this (if javascript is off):
.videoblock{width:560px; height: 315px; overflow:hidden}

and add the simultaneous animation:

$('.videoblock').css('height','0');
$(".entry-title").click(function() {
    $this = $(this);
    $content = $this.closest('.videotoggle').find(".videoblock");
    if (!$this.is('.active-title')) {

        $('.active-title').removeClass('active-title');
        $this.addClass('active-title');
        $(".videoblock:visible").animate({height: "0"}, { duration: 400, queue: false });
        $content.animate({height: "315"}, { duration: 400, queue: false });
    }
});

Here is the link to the final: http://jsfiddle.net/gwLcD/21/