Нужно объединить анимацию со слайдером

SM
На сайте с 27.11.2013
Offline
1
680

Есть слайдер, есть анимация на css, слайдер простой а про css смотрите ниже.

css


.animated{
-webkit-animation-duration:1.4s;
-moz-animation-duration: 1.4s;
-ms-animation-duration: 1.4s;
-o-animation-duration: 1.4s;
animation-duration: 1.4s;
overflow: hidden;
}
@keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
-moz-transform: scale(.3);
}
50% {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
}

70% {
-webkit-transform: scale(.9);
-moz-transform: scale(.9);
}

100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
}
}
@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
}

50% {
opacity: 1;
-webkit-transform: scale(1.05);
}

70% {
-webkit-transform: scale(.9);
}

100% {
-webkit-transform: scale(1);
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-o-animation-name: bounceIn;
animation-name: bounceIn;
}

Слайдер


Блоки в которые уже вбиты классы отвечающие за анимацию
<span class="bounceIn animated">1</span>
<span class="bounceIn animated">2</span>

Что хочу, но не получается сделать:

Чтобы при каждом показе картинки в слайдере эти 2 блока появлялись с задержкой

<span class="bounceIn animated">1</span> (через 6 секунд после загрузки изображения в слайдере)

<span class="bounceIn animated">2</span> (а этот 2-ой за ним через 10 секунд )

<span class="one"><h2>Title</h2></span> анимировался по ширине 0/200px

что то типа этого


var _start = {property: 0};
var _end = {property: 200};

jQuery(_start).animate(_end, {
duration: 600,
step: function() {
$('span.one h2').css('width', this.property + "px");
}
});

span.one h2 {width: 0;}
или

$('span.one h2').css('width', '0px');
$('span.one h2').animate({width: "200px"}, 600);

Если что не понятно, отпишите в комментариях, если что не понятно то могу через Team Viewer показать (если у вас будет время).

Буду благодарен за помощь!

Константин Валентинович
На сайте с 23.11.2013
Offline
64
#1

А можете разместить все это на одном из подобных сервисов: http://liveweave.com/ или http://jsfiddle.net/

setTimeout() Вы где применяли?

Santa Monica:
<span class="one"><h2>Title</h2></span>

Обратите внимание, что Вы блочный элемент h2 заключили в строковый - span (поменяйте span на div).

SM
На сайте с 27.11.2013
Offline
1
#2


$('.tt1,.tt2').hide();
setTimeout(function(){
$('.tt1').show();
}, 600);
setTimeout(function(){
$('.tt2').show();
}, 900);

<span class="tt1 bounceIn animated">1</span>
<span class="tt2 bounceIn animated">2</span>


---------- Добавлено 17.12.2013 в 08:27 ----------

Честно говоря, у мня как бы все получилось но в opere при смене картинок не происходит анимация bounceIn animated

Но при входе на сайт анимация работает.

Константин Валентинович
На сайте с 23.11.2013
Offline
64
#3
Santa Monica:

$('.tt1,.tt2').hide();
setTimeout(function(){
$('.tt1').show();
}, 600);
setTimeout(function(){
$('.tt2').show();
}, 900);

<span class="tt1 bounceIn animated">1</span>
<span class="tt2 bounceIn animated">2</span>


---------- Добавлено 17.12.2013 в 08:27 ----------

Честно говоря, у мня как бы все получилось но в opere при смене картинок не происходит анимация bounceIn animated

Но при входе на сайт анимация работает.

jQuery одинаково хорошо работает во всех браузерах.

В опере иногда на чужих компьютерах тоже наблюдал, что есть глюки с анимацией.

Попробуйте проверить в других браузерах и в опере на другом компьютере.

Если хотите, скину Вам в личку страницу с кучей анимационных эффектов - проверите у себя в Опере (чтобы выяснить - проблема в скрипте или браузере)

SM
На сайте с 27.11.2013
Offline
1
#4

Я тоже подумал что это и за моего компьютера, но попробовать на другом не стал(решил что я ошибся где то в коде или не правильно его написал).

Если хотите, скину Вам в личку страницу с кучей анимационных эффектов

Буду вам очень благодарен!

Константин Валентинович
На сайте с 23.11.2013
Offline
64
#5
Santa Monica:
Я тоже подумал что это и за моего компьютера, но попробовать на другом не стал(решил что я ошибся где то в коде или не правильно его написал).


Буду вам очень благодарен!

Написал в личку. Отпишитесь, плз., потом...

SM
На сайте с 27.11.2013
Offline
1
#6

Проблема не в компьютере, выходит неправильный код

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий