как грамотно выполнить задержку?
 

На событие 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();

FirstRelict,
флаг ;) :

var flag = true;
var cartoon_set_2 = function() {
    flag = false;
    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
                //сюда можно писать следующий код который будет выполняться после завершения анимации
            }
        });
    flag = true;
}
var cartoon_set_1 = function() {
    if (flag == false) return;
    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
                //сюда можно писать следующий код который будет выполняться после завершения анимации
            }
        });
 
}

Как вариант вызывать вторую функцию из первой, передав её как параметр...

Как например это делается в том же методе

show( скорость, [вызов] )

http://jquery-docs.ru/Effects/show/

Спасибо флаги самое то, осталось придумать что делать когда пользователь просто провел мышью