Mazin Al-Bahrani Mazin Al-Bahrani - 1 month ago 12
jQuery Question

SlideDown() using JavaScript not working as intended

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 Source

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%;}