感谢@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>
&#13;
答案 0 :(得分:1)
当你克隆$original
时,你应该重置它的高度,以便jQuery知道它的动画高度。
E.G:$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>
答案 1 :(得分: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%;}