使用 JavaScript 的 SlideDown() 未按预期工作答案

【问题标题】：SlideDown() using JavaScript not working as intended使用 JavaScript 的 SlideDown() 未按预期工作
【发布时间】：2017-08-19 14:22:07
【问题描述】：

感谢@mplungjan 帮助我完成了我的第一个查询，可以在这里找到：Remove div with button click using JavaScript

代码按预期工作，但是当我们尝试让 slideDown() 函数工作时，它看起来有点……滞后，然后只是弹出，动画没有按预期完成。

希望得到一些支持，看看如何解决这个问题。

找到下面的工作代码：

$(function() {
  var $original = $('#ValuWrapper'),
    $crossButton = $('#cross'),
    $content = $("#content");

  $content.on("click", ".cross", function() {
    if ($(this).is("#cross")) return false;
    var $cross = $(this);
    $(this).next().slideUp(400, function() {
      $(this).remove();
      $cross.remove();
    });
  });

  $("#repeat").on("click", function() {
    $content.append($crossButton.clone(true).removeAttr("id"));
    $content.append(
      $original.clone(true)
      .hide() // if sliding
      .attr("id",$original.attr("id")+$content.find("button.cross").length)
      .slideDown("slow") // does not slide much so remove if you do not like it
    );
  });

});

#content { height:100%}

#cross { display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="content">
  <button type="button" class="buttonImgTop cross" id="cross">X</button>
  <div id="ValuWrapper"> 
    ...content comes here... <br/>
  </div>
</div>
<button type="button" class="buttonImg" id="repeat">Add</button>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

请使用以下更新的动画代码。

$("#repeat").on("click", function() {
$content.append($crossButton.clone(true).removeAttr("id"));
$content.append(
  $original.clone(true)
   // if sliding
  .attr("id",$original.attr("id")+$content.find("button.cross").length).hide());
   // does not slide much so remove if you do not like it
   $("#"+$original.attr("id")+$content.find("button.cross").length).slideDown("slow");//change

});

and remove #content { height:100%;}

【讨论】：

【解决方案2】：

当您克隆 $original 时，您应该重置它的高度，以便 jQuery 知道它的动画高度。

例如：$original.css('height', $(this).height())

查看演示：

$(function() {
  var $original = $('#ValuWrapper'),
    $crossButton = $('#cross'),
    $content = $("#content");

  $content.on("click", ".cross", function() {
    if ($(this).is("#cross")) return false;
    var $cross = $(this);
    $(this).next().slideUp(400, function() {
      $(this).remove();
      $cross.remove();
    });
  });

  $("#repeat").on("click", function() {
    $content.append($crossButton.clone(true).removeAttr("id"));
    $content.append(
      $original.clone(true)
      .css('height', $(this).height())//set height
      .hide() .attr("id",$original.attr("id")+$content.find("button.cross").length)
      .slideDown("slow")
    );
  });

});

#content { height:100%;}
#cross { display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="content">
  <button type="button" class="buttonImgTop cross" id="cross">X</button>
  <div id="ValuWrapper"> 
    ...content comes here...
  </div>
</div>
<button type="button" class="buttonImg" id="repeat">Add</button>

【讨论】：