Smooth out this jQuery toggle animation?

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/

Answer 2

Any specific reason you do not want to use an accordion plugin directly? The jQuery UI library should take care of this pretty nicely.

Also, in case that does not work as expected, can you try css3 animations? You can get a gist of CSS3 animations here: http://titansturf.in/2012/01/12/using-css3-transitions/

You will have to create two classes, one with div-hide, which has height: 0 and one with div-show which has the required height set. Whenever you want to toggle, just change the class using jQuery.

IMO, using CSS3 would be a good options incase your target audience uses modern browsers. If not, you can use Modernizr to change the way things work according to the kind of browser being used.

Answer 3

What browser are you primarily gunning for? If it's any of the webkit browsers or FireFox then you could take advantage of the hardware accelerated CSS3 transitions with a jquery fallback.

http://msdn.microsoft.com/en-us/scriptjunkie/hh304380

I don't think jQuery easing currently uses CSS3 transitions as a first option but correct me if I am wrong.

Take a look at: http://css3.bradshawenterprises.com/all/

It wouldn't be too much effort at all to hack something up using CSS3.

Answer 4

Let's look at it this way!

I am not sure how many of these iframes you're going to load up on one page here, but one thing seems to be very certain; if you have one too many, you'll have enough of iframes with enough of youtube videos loading up.

Which means, unnecessary loads. The user may not click all of those links. The user may not watch all of those videos.

So:

1. There's an unnecessary bloat up of the resources, and an unnecessary consumption of the user's bandwidth.

2. And, moreover this is not scalable. Consider, you need 50 of those links on a page. OK. Take just 10. Even that is quite a lot!

I'm working up a jsfiddle for this one. Will post it here, when done!

Answer 5

check this out - http://jsfiddle.net/vbXVR/.

it uses this jquery

$(document).ready(function(){
    $(".entry-title").click(function() {
        $(".videoblock").animate({height: "315"}, 1500);
    });
});