Smooth out this jQuery toggle animation?

markratledge picture markratledge · Jan 26, 2012 · Viewed 13.8k times · Source

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

Alex Okrushko picture Alex Okrushko · Jan 29, 2012

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/