Поочередная анимауция
 

Всем здрасьте!
Есть код, который отвечает за появление 4 картинок. Данный код работает так, что картинки появляются одновременно:

$(document).ready(function(){
    $('.class-spec table tr td').mouseover(function(){
        $('.views-field-field-photo-fid .field-item:nth-child(1)', this).show("drop", 700);
        $('.views-field-field-photo-fid .field-item:nth-child(2)', this).show("drop", 700);
        $('.views-field-field-photo-fid .field-item:nth-child(3)', this).show("drop", 700);
        $('.views-field-field-photo-fid .field-item:nth-child(4)', this).show("drop", 700);
    });
});

Недавно появилась потребность сделать так, чтобы картинки появлялись по очереди.Начал копать в разных направлениях (setTimeout, queue, callback).
Выбрал все-таки setTimeout, как самый понятный. Вот что получилось:

$(document).ready(function(){
    $('.class-spec table tr td').mouseover(function(){
        $('.views-field-field-photo-fid-1', this).hide("fade", 700);
        $('.views-field-field-photo-fid', this).show();
        $('.views-field-field-photo-fid .field-item:nth-child(1)', this).show("drop", 700);
        $('.views-field-field-photo-fid .field-item:nth-child(2)', this).setTimeout(function(){show("drop", 500)}, 500);
        $('.views-field-field-photo-fid .field-item:nth-child(3)', this).setTimeout(function(){show("drop", 500)}, 1000);
        $('.views-field-field-photo-fid .field-item:nth-child(4)', this).setTimeout(function(){show("drop", 500)}, 1500);
    });
});

К сожалению, данный код не работает, выползает только первая картинка. Буду благодарен, если направите в нужное русло. Спасибо!

tishka,
примерно так ...

$(function () {
       $('.class-spec table tr td').mouseover(function () {
           var n = 1,
               td = this;
           (function show() {
               if (n > 4) return;
               $('.views-field-field-photo-fid .field-item:nth-child(' + n + ')', td).show("drop", 700, show);
               n++
           })()

       });

   })

Заранее извиняюсь за глупые вопросы, но все же)

1. Зачем вы function show() взяли в скобки? Так надо? Я не встречал просто такого
2. Что означает строка "if (n > 4) return" ? конкретно что делает return в данном контексте? По идее ведь, тут можно было использовать любой цикл?
3. Там в конце вы написали chow, наверно имели в виду slow. Если да, то зачем? Ведь до этого уже идет скорость 700?
4. td = this; - это обязательно делать? Я так понимаю, для меньшей загрузки ресурсов?

Спасибо!

tishka,
работает?
1 чтобы запустить функцию show == можно конечно show();
2. выход из функции если функция уже запускалась 4 раза -- циклом неполучится
3.опечатка , callback чтобы запустить функцию снова
4.да обязательно в данном случае - сохранение контекста иначе при втором запуске -- this внутри show укажет на window

рони,
спасибо! Я много чего не понял, но работает.....
Вы там в 3 местах пропустили точку с запятой ,надеюсь не специально, иначе вообще взрыв мозга. В принципе, работает и так и так. На всякий случай везде в конце добавил ";".
Всё-таки такую запись

(function show() {
 if (n > 4) return;
$('.views-field-field-photo-fid .field-item:nth-child(' + n + ')', td).show("drop", 700, show);
n++
           })()

вижу впервые, не совсем понял синтаксис... А точнее, зачем вы все это взяли в скобки, и зачем потом еще в конце поставили ()...

а, там еще какой-то баг иногда проскальзывает. 2 последние картинки появляются одновременно. Не постоянно, только когда мышкой дергать на объект и с объекта

это не баг -- это непродуманная логика - где-то нужен флаг -- что для этой ячейки шоу запущено -- больше пока ненадо -- и ещё лучше mouseleave чем mouseover

tishka,

(function show() {
 if (n > 4) return;
$('.views-field-field-photo-fid .field-item:nth-child(' + n + ')', td).show("drop", 700, show);
n++
           })()

тоже самое

function show() {
 if (n > 4) return;
$('.views-field-field-photo-fid .field-item:nth-child(' + n + ')', td).show("drop", 700, show);
n++
           };
show();

да, вот так как-то привычней, по крайней мере для меня))

Ладно, я думаю не критично. Мало кто будет мышкой специально елозить, так при спокойном наведении все норм

не, лучше mouseenter (уже поменял), мне ведь надо при наведении чтоб срабатывало