Question

在我的'review'div中，高度为185像素，我有一个链接'编辑'，点击时将div转换为250像素，链接变为'取消'，当点击回到185时，等等。

此代码（在js.erb文件中）对我很有用（'编辑'链接更改为'取消'）：

$('#review_<%=@review.id%>').html("<%= escape_javascript(render 'edit') %>")
$('#review_<%=@review.id %>').animate({height:'250px'}, 300);

我的#review div平滑扩展到250像素。现在我试图让相同的效果回到185像素。但是高度突然缩小 - 没有平稳过渡：

$('#review_<%=@review.id%>').replaceWith("<%= escape_javascript( review_block @review ) %>")
$('#review_<%=@review.id %>').animate({height:'185px'}, 300);

我有什么想法可以顺利制作动画吗？我尝试使用'html'而不是'replaceWith'，但它会抛出我的div的内容。感谢。

Answer 1

问题出现了，因为当你调用replaceWith时，你正在丢失jQuery设置高度的元素。为了说明，假设您有以下DOM：

<div id="page">
  <div id="review">
    <img src="review.gif"/>
    <input type="text"></input>
  </div>
</div>

当您在结束时致电$('#review').animate({height: '180px'}, 300);时，评论div现在将设置样式：

<div id="page">
  <div id="review" style="height:180px">
    <img src="review.gif"/>
    <input type="text"></input>
  </div>
</div>

当您致电$('#review').replaceWith("<div id="review2"></div>");时，您会移除该元素以及与之关联的样式：

<div id="page">
  <div id="review2">
  </div>
</div>

您有两种选择。一个是您可以在不打算从DOM中删除的元素上设置样式的动画。您可以为我当前正在操作的元素的父级设置动画，在我的示例中为#page。这样，当您替换review元素时，样式就不会被删除。

另一种选择是更改review_block @review以仅返回审核块的内容而不是整个内容。我现在假设函数返回的内容如下：

  <div id="review">
    <img src="review.gif"/>
    <input type="text"></input>
  </div>

您可以将review_block @review更改为仅返回（再次，我的示例）以下内容：

    <img src="review.gif"/>
    <input type="text"></input>

然后你可以使用jQuery html函数代替replaceWith，你应该保持你的风格，而不是搞砸你的定位。

jquery animate和replacewith函数，在我的ruby on rails应用程序中

1 个答案: