jQuery：FadeIn/To 和 SlideDown 新元素

Posted 2023-02-22

【中文标题】jQuery：FadeIn/To 和 SlideDown 新元素

【英文标题】：jQuery: FadeIn/To and SlideDown new element

【发布时间】：2012-03-06 00:11:08

【问题描述】：

这是我用来将新行推送到我的容器的一行代码：

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

item 是 Backbone.js 模型，render() 创建和/或修改对象，el 是 html 元素。 （在渲染完成之前，该对象永远不会显示）

我怎样才能保持** new ItemView(item).render() **并将其存储在一个变量中，然后淡入淡出并将其滑入我的容器（底部）？

编辑

请记住，this.$el 是容器元素。

【参考方案1】：

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

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

【讨论】：

我不得不做一些不同的事情，但感谢@Linus 为我指明了方向。

【参考方案2】：

为您的元素设置属性 style="display: none;"因此，当您附加它时，它将不可见。 然后添加 exec fadein 函数后，您的元素将可见。

我希望这会有所帮助。

【讨论】：

有一个如何做到这一点的例子吗？

谢谢。这正是我所需要的。

【参考方案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's element to the DOM
 someview.render(); // Rendering after we have appended to the DOM !!

【参考方案4】：

这似乎也有效

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