Основной эффект анимации - следует использовать jQuery или HTML5 Canvas?

62
9

В настоящий момент я работаю над очень простой анимацией для моей веб-страницы.

Я хотел бы переместить один элемент (.item1) снизу в контейнер.

Как только этот шаг будет завершен, я хотел бы переместить второй элемент (.item2) слева в середину контейнера.

Со временем эти блоки div будут заменены изображениями.

ДЕМО: http://jsfiddle.net/9rE6Z/3/embedded/result/

Какой был бы лучший подход к этому? Можно ли использовать jQuery или я должен смотреть на холст HTML5 для этого?

Я очень новичок в обеих областях и буду очень признателен за некоторые указания с этим :-)

Большое спасибо: -D

Мой HTML:

<div style="width:100%;background:white">

<div style="height:450px;width:980px;margin:0 auto;background:white;border:1px solid #000">

</div>

</div>

<div class="item1" style="position:absolute;top:450px;left:50%;width:100px;height:100px;background:black"></div><!-- ease this up from bottom -->
<div class="item2" style="position:absolute;top:0;left:0;width:100px;height:100px;background:blue"></div><!-- ease this in from left -->

спросил(а) 2021-01-19T19:34:59+03:00 2 месяца, 3 недели назад
1
Решение
75

Вы хотите что-то подобное? http://jsfiddle.net/9rE6Z/4/

var i1 = $("#item1"),
i2 = $("#item2"),
wrap = $("#wrap");

i1.animate({
"bottom": 0,
"opacity": 1
}, 700, function () {
i2.animate({
"left": 0,
"opacity": 1
}, 700);
});

Я немного изменил вашу HTML-метку, что делает ее более логичной.

<div id="wrap">
<div id="inner-wrap">
<div id="item1"></div>
<div id="item2"></div>
</div>
</div>

ответил(а) 2021-01-19T19:34:59+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема