Question

我想在每次点击按钮时创建一些动态div。如果顶部已经存在这样的div，则下一个这样的div将显示在所有div之下，但如果没有，则这个新div将从顶部开始。

此外，在添加五秒后，每个div应该消失，并且这个消失的div下方的所有div应该向上移动？

这是我的代码：

 $("body").append("<div style='position:
 absolute;top:0;right:0'     
 class='dynamic alert-danger'>something wrong!!!!</div>");
setTimeout(function() {
 $('.dynamic').fadeOut('fast');
 }, 5000);

Answer 1

＆＃13;

var bubbleCounter = 0;
$("#add-bubble").on("click", function(e){
  e.preventDefault();
  var counter = bubbleCounter + 1;
  var htmlString = '<div class="bubbles" id="bubble-'+counter+'">'+counter+'</div>';
  $("#bubbles-container").append( htmlString );
  setTimeout(function(){
    $("#bubble-"+counter).remove();
  }, 3000 );
  bubbleCounter = counter;
});//#add-bubble click()

＆＃13;

body{
  position: relative;
}
#bubbles-container{
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
}
#bubbles-container .bubbles{
  color: #fff;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: orange;
  line-height: 100px;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="bubbles-container"></div>
<button id="add-bubble">Add bubble</button>

＆＃13;

如何使用jquery追加动态div？

1 个答案: