JQuery: New FadeIn / To and SlideDown Element

Question

Here is one line of code that I use to insert a new line into my container:

this.$el.append(new ItemView(item).render().el);

Where itemis the Backbone.js model , render()creates and / or modifies an object, and elthis is an html element. (An object is never displayed until rendering is complete)

How can I save ** new ItemView(item).render()** and save it in a variable and then fade out and paste it (at the bottom) of my container?

Edit

Keep in mind that this this.$elis a container element.

Answer 1

var rendered = new ItemView(item).render();

$(rendered.el).appendTo(this.$el).hide().fadeIn().slideDown();

Answer 2

= "display: none;" , , . exec fadein .

, .

Answer 3

-, , .

, , :

var Someview = Backbone.View.extend({

       initialize: function () {

          this.template = _.template($("#someview-template"));  

          this.model.on('change', this.render());

       },
       render: function() { 

          var html = this.template(this.model);    

          this.$el.html(html);   

          return this;          

       }  
    });

, DOM.

 var $main = $('#main'); //main area in the DOM eg: <div id="main"></div>
 $main.append(new Somveview({model: item}).render().$el);

, render() ... , , . , - , , , , .

.

var Someview = Backbone.View.extend({

       initialize: function () {

          this.template = _.template($("#someview-template"));  

          this.model.on('change', this.render());

       },
       render: function() { 

          var html = this.template(this.model);    

          this.$el.html(html).hide().slideDown(600);   

          return this;          

       }  
    });

, , . , DOM!!! , , slideDown . , , DOM.

, , , , DOM.

, .

var Someview = Backbone.View.extend({

       initialize: function () {

          this.template = _.template($("#someview-template"));  

          this.model.on('change', this.render());

       },
       render: function() { 

          var html = this.template(this.model);    

          this.$el.html(html);   

          //no longer returning the views object from the render method. 

       }  
    });

DOM

 var $main = $('#main'); //main area in the DOM eg: <div id="main"></div>
 var someview = new Somveview({model: item}); //create the view
 $main.append(someview.$el); // add the view element to the DOM
 someview.render(); // Rendering after we have appended to the DOM !!

Answer 4

this.$el.append($(new ItemView(item).render().el).hide().fadeIn());