jquery-ui - jQuery UI 动画回调在动画开始之前执行

Question

我试图让一些动画在我将底层模型的数据刷新到新记录时调用的主干视图的渲染操作期间工作。

SiteView = Backbone.View.extend({

    initialize: function () {
        this.model.bind('change', this.render, this);
    },

    render: function () {
        if (this.model.get('name')) {
            var callback = function (view) {
                view.$("#activesite_name").empty().append(view.model.get('name'));
                view.$("#activesite_desc").empty().append(view.model.get('description'));
                $(view.el).show('drop', { direction: 'down' }, 'slow').removeClass('hidden');
            };

            $(this.el).filter(':visible').fadeOut(500, callback(this));
        }
    }
});

但是，jQuery UI 回调函数是在 show 操作之前执行的，导致 UI 更新然后在从一个模型选择刷新到另一个模型时消失。

仅在正确隐藏元素后，如何才能调用回调？

Answer 1

试试这个：

render: function () {
    if (this.model.get('name')) {
        var view = this;
        var callback = function () {
            view.$("#activesite_name").empty().append(view.model.get('name'));
            view.$("#activesite_desc").empty().append(view.model.get('description'));
            view.$el.show('drop', { direction: 'down' }, 'slow').removeClass('hidden');
        };

        $(this.el).filter(':visible').fadeOut(500, callback);
    }
}