Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Smooth out this jQuery toggle animation?

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);
    }
});
});
like image 397
markratledge Avatar asked Jan 26 '12 21:01

markratledge


2 Answers

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/

like image 126
Alex Okrushko Avatar answered Sep 21 '22 21:09

Alex Okrushko


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

it uses this jquery

$(document).ready(function(){
    $(".entry-title").click(function() {
        $(".videoblock").animate({height: "315"}, 1500);
    });
});
like image 20
theliberalsurfer Avatar answered Sep 21 '22 21:09

theliberalsurfer