Обратный вызов Jquery с синхронной анимацией - PullRequest
Новая
       10

Обратный вызов Jquery с синхронной анимацией

0 голосов
/ 12 ноября 2010

В моих плагинах jQuery я часто ожидаю, что некоторые обратные вызовы определяются пользователем, как в простом примере ниже 

(function($) {
    $.fn.myplugin = function(options) {
        var s = $.extend({}, options),
            $this = $(this);

        if (typeof s['initCallback'] === 'function') {
            s['initCallback']($this);    
        }
        $this.animate({width: '+=300'}, 3000);   /* animation in plugin */
    }
})(jQuery);

Иногда определенный обратный вызов содержит такой синхронный код, и этот код работает как I 'ожидая 

$('#mydiv').myplugin({
    initCallback : function(mydiv) {
       $('<div>This is synchronous, so it will entirely executed before animation</div>')
           .insertBefore(mydiv);
    }   
});

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

$('#mydiv').myplugin({
    initCallback : function(mydiv) {
       $('<div>animations are not synchronous here</div>')
           .insertBefore(mydiv)
           .hide()
           .fadeIn(4000); /* animation in callback */
    }   
});

, в этом последнем случае у нас есть две анимации, которые явно перекрываются, потому что после выполнениямой initCallback() оставшийся код плагина не выполняется должным образом при fadeIn() обратном вызове.

Итак, я спрашиваю: существует ли общий шаблон jQuery для работы с обоими типами кода (асинхронным / синхронным), чтобы быть уверенным, что initCallback() когда-нибудь прервет выполнение, независимо от того, какой кодэто определяет?Или я должен кодировать оба случая двумя различными способами?

Код этого примера доступен на http://jsfiddle.net/fcalderan/LKttT/

Заранее спасибо.

1 Ответ

1 голос
/ 12 ноября 2010

http://api.jquery.com/animate/

.animate (свойства, опции)

properties Карта свойств CSS, которые анимация будет двигаться в направлении.

опций Карта дополнительных опций для перейти к методу. Поддерживаемые ключи:

  • длительность: строка или число, определяющее продолжительность анимации. побежит.
  • easing: строка, указывающая, какую функцию замедления использовать для переход.
  • complete: функция, вызываемая после завершения анимации.
  • step: функция, вызываемая после каждого шага анимации.
  • queue: логическое значение, указывающее, помещать ли анимацию в очередь эффектов. Если false, анимация начнется немедленно.
  • specialEasing: Карта одного или нескольких свойств CSS, определенных аргумент свойства и их соответствующие функции замедления (добавлено 1.4).

Вы должны установить очередь на false .

...