Сгладить эту анимацию jQuery toggle?

Question

Анимация, созданная моей функцией jQuery, неустойчива, и я просматриваю различные SO-решения, такие как добавление jquery.easing, но не повезло. Является ли проблема iframes в каждом div?

Любые идеи о том, как сгладить анимацию? Является ли моя основная функция переключения лучшим способом?

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

Основная разметка ниже, и повторяется несколько раз на странице (с блоками текста между каждым "videotoggle" дел):

<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> 

И функция:

$(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

решение Эндрю является правильным, но я бы все-таки поставил CSS, как это (Если JavaScript выключен): .videoblock {ширина: 560px; высота: 315px; переполнение: скрытый}

и добавить одновременную анимация:

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

Вот ссылка на финал: http://jsfiddle.net/gwLcD/21/

Answer 2

проверить это - http://jsfiddle.net/vbXVR/.

он использует этот JQuery

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

Answer 3

Любой конкретную причина, вы не хотите использовать аккордеон плагин напрямую? Библиотека jQuery UI должна позаботиться об этом довольно красиво.

Кроме того, в случае, если это не работает должным образом, можете ли вы попробовать анимацию css3? Вы можете получить суть CSS3 анимации здесь: http://titansturf.in/2012/01/12/using-css3-transitions/

Вы должны создать два класса, один с div-hide, который имеет height: 0 и один с div-show который имеет необходимый набор height. Когда вы хотите переключиться, просто измените класс с помощью jQuery.

IMO, используя CSS3, будет хорошим вариантом, если ваша целевая аудитория использует современные браузеры. Если нет, вы можете использовать Modernizr, чтобы изменить способ работы в зависимости от используемого браузера.

Answer 4

В каком браузере вы в основном стреляете? Если это какой-либо из браузеров веб-браузера или FireFox, тогда вы можете воспользоваться аппаратными ускоренными переходами CSS3 с резервным копированием jquery.

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

Я не думаю, что JQuery ослабления в настоящее время использует CSS3 переходы как первый вариант, но поправьте меня, если я ошибаюсь.

Взгляните: http://css3.bradshawenterprises.com/all/

Это не было бы слишком много усилий на все, чтобы взломать что-то с помощью CSS3.

Answer 5

Давайте посмотрим на это так!

Я не уверен, сколько из этих фреймов вы собираетесь загрузить на одной странице здесь, но одна вещь кажется очень уверенной; если у вас их слишком много, у вас будет достаточно фреймов с достаточным количеством загружаемых видео на YouTube.

Это означает, что ненужные грузы. Пользователь не может щелкнуть по всем этим ссылкам. Пользователь может не смотреть все эти видео.

Итак:

1. Там в ненужное раздувание из ресурсов, и ненужное потребление полосы пропускания пользователя.

2. И, кроме того, это не масштабируемо. Подумайте, вам нужно 50 из этих ссылок на странице. ОК. Возьмите всего 10. Даже это довольно много!

Я работаю над jsfiddle для этого. Поставит его здесь, когда это будет сделано!