Сгладить анимацию переключения JQuery? - PullRequest
Новая
       25

Сгладить анимацию переключения JQuery?

8 голосов
/ 27 января 2012

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

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

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

Базовая разметка находится ниже и повторяется много раз настраница (с блоками текста между каждым div "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);
    }
});
});

Ответы [ 5 ]

11 голосов
/ 29 января 2012

Эндрю предлагает правильное решение, но я бы все равно поставил css следующим образом (если javascript выключен): .videoblock {width: 560px;высота: 315 пикселей;переполнение: скрыто}

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

$('.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/

5 голосов
/ 29 января 2012

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

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

$(document).ready(function(){
    $(".entry-title").click(function() {
        $(".videoblock").animate({height: "315"}, 1500);
    });
});
4 голосов
/ 04 февраля 2012

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

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

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

Итак:

  1. Существует ненужное увеличение ресурсов и ненужное потребление пропускной способности пользователя.

  2. И, кроме того, это не масштабируется. Учтите, вам нужно 50 таких ссылок на странице. ХОРОШО. Возьми только 10. Даже это довольно много!

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

1 голос
/ 04 февраля 2012

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

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

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

Посмотрите на: http://css3.bradshawenterprises.com/all/

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

1 голос
/ 01 февраля 2012

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

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

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

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

...