Функция jQuery, связывающая несвязанные объекты - PullRequest
Новая
       5

Функция jQuery, связывающая несвязанные объекты

3 голосов
/ 28 марта 2012

Я, конечно, искал SO для ответа на свой «конкретный» вопрос, но не нашел ничего, что позволило бы мне достичь желаемой цели.По сути, я хотел бы иметь возможность объединять вызовы функций с возможностью добавлять «задержку» между этими вызовами.Я полагаю, что потребуется нечто вроде цепочки setTimeout().Однако, поскольку эти вызовы асинхронны, я, очевидно, не могу просто связать их вместе и надеяться на результат.Я увидел ссылку на встроенные функции очереди и удаления jQuery и подумал, что что-то может сработать, основываясь на этом.До сих пор я не смог придумать ничего, что приближалось бы к моим требованиям.

Я создал очень простой пример, который демонстрирует то, чего я пытаюсь достичь, цепочкой здесь (btw - jsfiddle isбудучи немного медленным сегодня):

http://jsfiddle.net/jimibt/wZeTT/

это использует вложенные вызовы setInterval, поэтому является мерзким и не масштабируется.Моя нирвана была бы методом расширения jquery, который имел следующий синтаксис (1-й параметр - функция, 2-й параметр - задержка значения setTimout): 

$().chain($('#strap1').fadeIn(1300), 500)
     .chain($('#strap2').fadeIn(1300), 500)
     .chain($('#strap3').fadeIn(1300), 500)
     .start();

Теперь я знаю, что есть функция delay () вjquery, но это работает (насколько мне известно) только как часть цепочки против одного селектора и, таким образом, не может использоваться для объединения нескольких несвязанных элементов, как в моем примере.Я видел этот связанный вопрос SO, который ЗАКРЫТ к тому, на что я надеялся, но все еще не обернутым так, как мне бы хотелось:

Цепочка анимаций jQuery, которые влияют на разные элементы

Есть мысли?

Ответы [ 2 ]

3 голосов
/ 28 марта 2012

Вы можете использовать обратные вызовы, как это 

$('#strap1').delay(500).fadeIn(1300,function(){
    $('#strap2').delay(500).fadeIn(1300,function(){
        $('#strap3').delay(500).fadeIn(1300);
    });
});

Использование [демо] 

$('#strap1').delay(500).fadeIn(1300,function(){
    $('#strap2').delay(500).fadeIn(1300,function(){
        $('#strap3').delay(500).fadeIn(1300, function() {
            $('#strapline').css({
                'color': '#fff'
            }).animate({
                'color': color
            }, 3000);            
        });
    });
});
2 голосов
/ 28 марта 2012

Вы можете использовать методы delay и queue для цепочки анимаций: 

$('#strap1').delay(500).fadeIn(1300).queue(function(){
    $('#strap2').delay(500).fadeIn(1300).queue(function(){
        $('#strap3').delay(500).fadeIn(1300);
    });
});

Демонстрация: http://jsfiddle.net/Guffa/8QZcN/

...