Показать сообщение отдельно
  #1 (permalink)  
Старый 10.06.2014, 11:28
Интересующийся
Отправить личное сообщение для tishka Посмотреть профиль Найти все сообщения от tishka
 
Регистрация: 05.06.2014
Сообщений: 27

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


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