CODEWITHSUNDEEP
jquery-uianimationbackbone.jscallback
Nidonocu
Nidonocu

Reputation: 12618

jQuery UI animation Callback executing before animation starts

I'm trying to get some animation to work during a Backbone View's render operation that is called when I have refreshed the data of the underlying model to a new record.

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));
        }
    }
});

However, the jQuery UI callback function is being executed before the show operation is, resulting in the UI updating and then disappearing when refreshing from one model selection to another.

How can I get the callback to be called only once the element is properly hidden?

Upvotes: 0

Views: 279

Answers (1)

rinat.io
rinat.io

Reputation: 3188

Try this:

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);
    }
}

Upvotes: 2

Related Questions