Есть набор простых функций, которые выполняются через какой-то промежуток времени (каждая через свой). Суть этих функций состоит в создании простой анимации двух объектов, движение, добавление класса css-анимации и тд. Все функции находятся в самом html-документе, без подключения через файлы. Заметил одну, не понятную для себя, особенность: в Chrome, IE, Firefox, функции выполняются в разном порядке.
Часть функций написана с использованием библиотеки Move.js
$(document).ready(function() {
move('.home-img-animate-1').ease('in').x(1150).duration('2s').end();
move('.home-img-animate-1').set('opacity', .0).then().set('opacity', 1).duration('2s').pop().end();
move('.home-img-animate-steak').ease('in').y(-300).duration('1.5s').end();
move('.home-img-animate-steak').set('opacity', .0).then().set('opacity', 1).duration('2s').pop().end();
move('.home-img-animate-knife').ease('in').x(-300).duration('1.5s').end();
move('.home-img-animate-knife').set('opacity', .0).then().set('opacity', 1).duration('2s').pop().end();
move('.home-img-animate-2').ease('in').x(-1050).duration('2s').end();
move('.home-img-animate-2').set('opacity', .0).then().set('opacity', 1).duration('2s').pop().end();
move('.home-img-animate-3').set('opacity', .0).then().set('opacity', 1).duration('6s').pop().end();
});
Часть просто добавляет или меняет классы:
function func_remove_2() {
$( ".home-img-animate-1, .home-img-animate-2" ).removeClass( "alarm" );
}
setTimeout(func_remove_2, 4500);
function func_2() {
$( ".pechat" ).addClass( "expandOpen full-opacity" );
}
setTimeout(func_2, 4000);
И тому подобное.
Каким способом можно сделать последовательное выполнение функций, чтобы в любом из браузеров все работало одинаково?
Средний