0

在我的“评论”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 的内容错位。谢谢。

4

1 回答 1

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_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>

然后你可以使用 jQueryhtml函数代替，replaceWith你应该保持你的风格，不要弄乱你的定位。

于 2013-07-31T22:59:39.827 回答