Javascript 如何在不影响样式的情况下，在使用动画单击后将div堆栈置于页面底部

我想把

单击的div

放在堆栈的底部，而不丢失任何

样式

和一些

动画

问题：当我

点击
a
div
时，它应该进入底部，而不会丢失任何样式

这是代码笔：


$（函数（）{
$（'.box'）。在（'click'，function（）上{
var clone=$（this.clone（）；
$（this.remove（）；
$（“#包装器”）.append（克隆）；
});
});
div.box{
高度：100px；
宽度：200px；
背景：红色；
显示：内联块；
}
分区框：活动{
背景：黄色；
}
第2分区{
背景：绿色；
}
第3分区{
背景：橙色；
}
分区箱{
文本对齐：居中；
颜色：#fff；
字号：26px；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
尝试使用
$（this）.insertAfter（$（“#wrapper.box:last”）
；我相信它解决了你只能点击一次的问题

演示


$（函数（）{
$（'.box'）。在（'click'，function（）上{
$（this.insertAfter（$（“#wrapper.box:last”））
});
});
div.box{
高度：100px；
宽度：200px；
背景：红色；
显示：内联块；
}
分区框：活动{
背景：黄色；
}
第2分区{
背景：绿色；
}
第3分区{
背景：橙色；
}
分区箱{
文本对齐：居中；
颜色：#fff；
字号：26px；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
尝试使用
$（this）.insertAfter（$（“#wrapper.box:last”）
；我相信它解决了你只能点击一次的问题

演示


$（函数（）{
$（'.box'）。在（'click'，function（）上{
$（this.insertAfter（$（“#wrapper.box:last”））
});
});
div.box{
高度：100px；
宽度：200px；
背景：红色；
显示：内联块；
}
分区框：活动{
背景：黄色；
}
第2分区{
背景：绿色；
}
第3分区{
背景：橙色；
}
分区箱{
文本对齐：居中；
颜色：#fff；
字号：26px；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
使用
位置：固定属性

希望这有帮助。
使用
位置：固定属性

希望这有帮助。
您可以在单击事件函数中添加“this”。此外，通过浮动div，它们不会添加额外的空间，并且在单击后样式保持不变


$（函数（）{
$（'.box'）。在（'click'，function（）上{
$（'#wrapper'）。追加（this）；
});
});
div.box{
高度：100px；
宽度：200px；
背景：红色；
显示：内联块；
文本对齐：居中；
颜色：#fff；
字号：26px；
边际：0px；
浮动：左；
}
分区框：活动{
背景：黄色；
}
第2分区{
背景：绿色；
}
第3分区{
背景：橙色；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
您可以在单击事件函数中添加“this”。此外，通过浮动div，它们不会添加额外的空间，并且在单击后样式保持不变


$（函数（）{
$（'.box'）。在（'click'，function（）上{
$（'#wrapper'）。追加（this）；
});
});
div.box{
高度：100px；
宽度：200px；
背景：红色；
显示：内联块；
文本对齐：居中；
颜色：#fff；
字号：26px；
边际：0px；
浮动：左；
}
分区框：活动{
背景：黄色；
}
第2分区{
背景：绿色；
}
第3分区{
背景：橙色；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
我似乎在为我工作，请解释出错的原因我似乎在为我工作，请解释出错的原因为什么position fixed会有帮助？如果他想在不考虑用户行为的情况下修复堆栈底部div的位置，“position:fixed”是使用直接CSS实现这一点的一种方法。这样，它总是停留在同一个地方，在这种情况下-底部。我是否误解了这个问题？？你的想法是什么？我相信他想把他点击的元素移动到包装纸的末端。我明白了-我以为他的要求只是把邮筒固定在底部。看着上面@Jeff的回答，我明白他在问什么了。他给出了一个很好的解决方案。为什么position fixed会有帮助呢？如果他想在不考虑用户行为的情况下固定div在堆栈底部的位置，“position:fixed”是使用直接CSS实现这一点的一种方法。这样，它总是停留在同一个地方，在这种情况下-底部。我是否误解了这个问题？？你的想法是什么？我相信他想把他点击的元素移动到包装纸的末端。我明白了-我以为他的要求只是把邮筒固定在底部。看着上面@Jeff的回答，我明白他在问什么了。他给出了一个很好的解决方案。我可以添加一些动画，比如从
顶部
到
底部
？我可以添加一些动画，比如从
顶部
到
底部
？很好的解决方案人，如果有时间，你能从顶部到底部添加一些反弹动画吗？很好的解决方案人，如果有时间，你可以添加一些从上到下的反弹动画吗