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

[tishka]

Всем здрасьте!
Есть код, который отвечает за появление 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++
           })()

       });

   })

[tishka]

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

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

[tishka]

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

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

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

[tishka]

а, там еще какой-то баг иногда проскальзывает. 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();

[tishka]

тоже самое

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

где-то нужен флаг

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

лучше mouseleave чем mouseover

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