Пользовательские анимации с Jquery / Javascript

Question

Простите, если это не лучший форум, чтобы задавать этот вопрос. Я не уверен, с чего начать, так что, возможно, кто-то здесь может направить меня.

Используя html и jquery / javascript, я хочу, чтобы анимация одного элемента переворачивалась на другой элемент. Как будто кто-то извлекает страницу из файла и заменяет ее поверх другой страницы в файле.

Пожалуйста, смотрите прикрепленную картинку для справки.

Answer 1

Если (и только если) вам нужны пользовательские анимации, проверьте этот приятный плагин jQuery: http://weepy.github.com/jquery.path/

Это должно привести вас в правильном направлении.Ваш общий подход:

1. Создайте путь, который переводит Box2 в положение на шаге 4.
2. Измените z-индекс Box2, чтобы он был сверху Box1.
3. Анимируйте Box2 обратно по тому же пути в противоположном направлении.

Добавление: вот хороший ReadMe для создания вашего пути: https://github.com/weepy/jquery.path/blob/master/README.markdown

Дополнение № 2: Меня спросили, как сделать вращение, поэтому я откопал пару плагинов, чтобы сделать это:

1. http://plugins.jquery.com/project/AnimateRotation
2. http://plugins.jquery.com/project/jQueryRotate

Если у кого-то есть опыт работы с любым из них (я не делаю), оставьте комментарий ниже для ОП!

Answer 2

Rotationhttp://code.google.com/p/jqueryrotate/http://code.google.com/p/jqueryrotate/wiki/ExamplesЭтот плагин предназначен специально для изображений, в то время как в браузере, совместимом с CSS3, другие элементы будут работать в старых браузерах и IE: не ожидайте, что другие элементы будут работать.

Пример:

$myContainer = $('selector');
$myContainer.rotate({animateTo:45}).animate({'left':100,'top':-100}, function(){
    $myContainer.css('z-index', 2).rotate({animateTo:0}).animate({'left':0,'top':0});
});

Возможно, попробуйтеобъедините его с http://weepy.github.com/jquery.path/ (спасибо Адаму Терлсону за публикацию) для анимации плавного пути.Выглядит как отличный плагин.

По моему опыту, вращение в IE всегда сбивает с толку.

Некоторое время назад я применил пару сценариев к чему-то, что лучше всего сработало для меня: http://pastebin.com/kDK9mu9W однакоЯ сделал это для моего проекта и никогда не тестировал его снаружи, и у него нет анимации - вам нужно будет использовать интервал.IE7, IE8 и CSS3 совместимый браузер поддерживает все элементы.Изображения предотвращаются конфликтами фильтров.

Answer 3

Это вопрос?Вы, конечно, могли бы использовать jquery для этого, и уже есть несколько плагинов, которые предлагают нечто подобное.См. Анимацию случайного типа jCycle

http://jquery.malsup.com/cycle/

Я уверен, что вы могли бы взглянуть на код там, чтобы получить некоторые подсказки о том, как действовать.

Answer 4

Есть два деления с соответствующими Z-баллами. Анимируйте div, чтобы скользить в верхнем правом углу, как только div полностью освободится, переключите z-счет и переверните анимацию.

Answer 5

Здесь есть превосходное руководство , которое объясняет основы спрайтовой анимации с помощью jQuery.Это не решение для вашего конкретного вопроса, но оно предлагает краткое введение в концепции, которые вам нужны.