使用JavaScript的SlideDown（）无法正常工作

Question

Thanks to @mplungjan for helping me complete my first query which can be found here: Remove div with button click using JavaScript

The code works as intended however when we tried to get the slideDown() function to work it looks a bit... laggy and then just pops up without the animation being completed as intended.

Would like some support to see how can this be fixed.

Find below working code:

 $(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> 

Answer 1

When you clone the $original you should reset its height so jQuery knows what height its got to animate to.

EG: $original.css('height', $(this).height())

See demo:

 $(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> 

Answer 2

Kindly use below updated code for animation.

$("#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%;}