триггер события jQuery;обратный вызов и синхронизация по отношению к анимации - PullRequest
Новая
       18

триггер события jQuery;обратный вызов и синхронизация по отношению к анимации

0 голосов
/ 15 сентября 2011

Возможно, мой вопрос отличается от простоты самого себя: Если я .trigger() событие, как я могу гарантировать, что код, следующий за упомянутым .trigger(), не будет выполняться, пока полностью Функция обработчика событий завершена, включая все анимации, задержки и т. Д., В ней?

Надеюсь, что-то здесь не хватает;Я настраиваю пользовательский интерфейс с кучей пользовательских событий.Некоторые из событий на самом деле просто совокупность других событий;например: 

// ...
'cb-ui.hide': function(event){
    // do stuff to hide
},
'cb-ui.close': function(event){
    $(this).trigger('cb-ui.hide');
    // more stuff for close
},
// ...

Учитывая, что в событии cb-ui.hide есть анимация, например .fadeOut(1500), кажется ( в моем тестировании ), что оставшиеся // more stuff for close не 't ждать завершения анимации в запущенном событии.Я думал ( до ссылки на документы ), что .trigger(), вероятно, будет иметь необязательный аргумент обратного вызова, очень похожий на методы анимации: 

$(this).trigger('cb-ui.hide', function(event){
    // more stuff for close
});

Но это не похоже надело.Поскольку триггеры событий не блокируются ( или, по-видимому, не меньше ), что я могу сделать, чтобы форсировать желаемую функциональность, сохраняя при этом реализацию обработчика / триггера событий, которую я строилиз?

Более конкретно: 

$('[data-cb-ui-class="window"]').live({
    'cb-ui.hide': function(event){
        $(this).find('[data-cb-ui-class="content"]').animate({
            opacity: 0
        }, 1000);
    },
    'cb-ui.show': function(event){
        $(this).find('[data-cb-ui-class="content"]').animate({
            opacity: 1
        }, 1000);
    }
    'cb-ui.close': function(event){
        $(this).trigger('cb-ui.hide');
        $(this).find('[data-cb-ui-class="content"]').animate({
            height: 'hide' // happening simultaneously to the animation of 'cb-ui.hide'
                           // expected to happen in tandem; one after the other
        }, 1000);
    },
    'cb-ui.update': function(event, html){
        // none of this is working as expected; the expected being, the 'cb-ui.hide'
        // event is triggered (thus fading the [...-content] out) the HTML content is
        // updated, then the [...-content] is faded back in from 'cb-ui.show'
        // instead its just a mess that results in it fading out
        $(this).trigger('cb-ui.hide');
        $(this).find('[data-cb-ui-class="content"]').html(html);
        $(this).trigger('cb-ui-show');
    }
});

$('#foo').trigger('cb-ui.update', ['<p>Hello world!</p>']); // #foo is bound

Этот пример анимации должен занять ~ 2 секунды, но, похоже, занимает 1;Обе анимации происходят одновременно, а не в логическом порядке.

1 Ответ

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

Не уверен, правильно ли я понимаю ваш вопрос, но имеет ли это смысл?

Вы можете просто передать другую функцию для запуска после завершения анимации. 

'cb-ui.hide': function(event, callback){
    $('.lol').fadeTo(0,function() {
        // fire callback
    })
},
'cb-ui.close': function(event){
    cb-ui.hide(e,function() {
        // other stuff
    });
},
...