На событие hover, стоит запуск функции анимации
$("#block").hover(
function () {
cartoon_set_2(); //раскрытие img1->img2->imgn
},
function () {
cartoon_set_1();//раскрытие imgn->img2->img1
}
);
Вот сами функции
var cartoon_set_2 = function() {
stop_all();
cartoon_image2.play({
id:['block','cartoon'],//id div элемента и img элемента
src:'test_img/11.jpg',//ссылка на изображение
frames_x:8,//количество кадров на изображении по x
frames_y:1,//количество кадров на изображении по y
width:2400,//ширина изображения
height:383,//высота изображения
fps:24,//скорость показа кадров в секунду, можно писать дробные числа
reverse:false,//если true то проигрывается с конца в начало
playandstop:true,//если true то проиграть 1 раз и передать управление функции next
next: function () {//выполнится только если playandstop==true
//сюда можно писать следующий код который будет выполняться после завершения анимации
}
});
}
var cartoon_set_1 = function() {
stop_all();
cartoon_image2.play({
id:['block','cartoon'],//id div элемента и img элемента
src:'test_img/11.jpg',//ссылка на изображение
frames_x:8,//количество кадров на изображении по x
frames_y:1,//количество кадров на изображении по y
width:2400,//ширина изображения
height:383,//высота изображения
fps:24,//скорость показа кадров в секунду, можно писать дробные числа
reverse:true,//если true то проигрывается с конца в начало
playandstop:true,//если true то проиграть 1 раз и передать управление функции next
next: function () {//выполнится только если playandstop==true
//сюда можно писать следующий код который будет выполняться после завершения анимации
}
});
}
Минус в том что если, двигать курсором быстро, то не закончив cartoon_set_2();
начинается cartoon_set_1();
Как сделать так, что пока не закончилась cartoon_set_2(); не запускать cartoon_set_1();