.queue () и .proxy (), время анимации в jQuery - PullRequest
Новая
       1

.queue () и .proxy (), время анимации в jQuery

1 голос
/ 17 сентября 2011

Я работаю над псевдо-плагином ( просто действительно инициализатор пространства имен для объекта jQuery ), и у меня возникли небольшие проблемы с .proxy() и .queue() (, казалось бы, два из самых неправильно понятых методов вокруг )

Во всяком случае, я думал, что у меня есть логика разобрались; функция $.cb() принимает карту функций как таковую: 

$.cb({
    'show':         function(){ },
    'hide':         function(){ },
    'open':         function(){ },
    'close':        function(){ },
    'beforeUpdate': function(){ },
    'afterUpdate':  function(){ }
});

Эти функции ( должны ) содержат последовательности анимации, примененные к $(this), контекст которого внутренне, через .proxy(), был изменен на соответствующий элемент (ы). Они хранятся в переменной settings, доступной для всех методов «плагина».

Внутренне, некоторые обработчики событий с пространством имен, подключенные через .live({ }): 

// ...
'cb.hide': function(event){
    if(event.isPropagationStopped()){
        return false;
    }
    event.stopPropagation();
    $.proxy(settings.hide, this)();
    $(this).hide();
},
'cb.update': function(event, html){
    if(event.isPropagationStopped()){
        return false;
    }
    event.stopPropagation();
    $.proxy(settings.beforeUpdate, this)();
    $(this).html(html);
    $.proxy(settings.afterUpdate, this)();
},
// ...

В любом случае, цель заключается в том, чтобы с помощью этого «плагина» встроить в таблицу функциональные возможности, но разработчик может передать карту функций, чтобы выбрать различные переходные анимации.

Проблема в том, что я не могу заставить эти функции правильно ставить в очередь; разные, имеющие приоритет, и т. д. Я пытался подшучивать над .queue(), но, похоже, я ничего не могу с этим поделать: 

// in cb.update
var $this = $(this);
$(this).queue(function(next){
    $.proxy(settings.beforeUpdate, $this)();
    next();
}).queue(function(next){
    $this.html(html);
    next();
}).queue(function(next){
    $.proxy(settings.afterUpdate, $this)();
}).dequeue();

Проблема особенно распространена в случае события 'cb.update', порядок должен быть следующим:

  • beforeUpdate вызывается ( последовательность анимации происходит и завершается )
  • Содержимое элемента обновляется с помощью .html()
  • afterUpdate вызывается ( последовательность анимации происходит и завершается )

Что на самом деле происходит:

  • Содержимое элемента обновляется с помощью .html()
  • beforeUpdate вызывается ( последовательность анимации происходит и завершается )
  • afterUpdate вызывается ( последовательность анимации происходит и завершается )

Таким образом, учитывая, что поставляемая анимация просто .fadeOut() и fadeIn() для beforeUpdate и afterUpdate соответственно, она обновляет содержимое, затем исчезает и входит.

Итак, есть предложения по реализации такого рода? Как я могу обеспечить правильный порядок событий / анимации? Я пошел на дико глупый путь с точки зрения реализации такой функции?

...