Question

我想将clicked div放到堆栈的底部，而不用一些styles丢掉任何animation

问题：当我clicked到div时，它应该转到底部而不会丢失任何样式

这是codepen： https://codepen.io/anon/pen/YjByzo

$(function(){
  $('.box').on('click',function(){
      var cloned = $(this).clone();
      $(this).remove();
      $('#wrapper').append(cloned);
   });
});

div.box{
  height: 100px;
  width: 200px;
  background:red;
  display: inline-block;
}
div.box:active{
  background:yellow;
}
div.box2{
  background:green;
}
div.box3{
  background:orange;
}

div.box{
  text-align:center;
  color:#fff;
  font-size:26px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <!-- for box 2 -->
    <div class="box box2">7</div>
    <div class="box box2">8</div>
    <div class="box box2">9</div>
    <div class="box box2">10</div>
    <div class="box box2">11</div>
    <div class="box box2">12</div>
    <!-- for box 3-->
    <div class="box box3">13</div>
    <div class="box box3">14</div>
    <div class="box box3">15</div>
    <div class="box box3">16</div>
    <div class="box box3">17</div>
    <div class="box box3">18</div>
</div>

Answer 1

尝试使用$(this).insertAfter($("#wrapper .box:last"));我相信它可以解决您只能单击一次的问题。

演示

$(function() {
  $('.box').on('click', function() {
    $(this).insertAfter($("#wrapper .box:last"))
  });
});

div.box {
  height: 100px;
  width: 200px;
  background: red;
  display: inline-block;
}

div.box:active {
  background: yellow;
}

div.box2 {
  background: green;
}

div.box3 {
  background: orange;
}

div.box {
  text-align: center;
  color: #fff;
  font-size: 26px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <!-- for box 2 -->
  <div class="box box2">7</div>
  <div class="box box2">8</div>
  <div class="box box2">9</div>
  <div class="box box2">10</div>
  <div class="box box2">11</div>
  <div class="box box2">12</div>
  <!-- for box 3-->
  <div class="box box3">13</div>
  <div class="box box3">14</div>
  <div class="box box3">15</div>
  <div class="box box3">16</div>
  <div class="box box3">17</div>
  <div class="box box3">18</div>
</div>

Answer 2

您可以在点击事件功能中附加“ this”。此外，通过浮动DIV，它们不会添加额外的空间，并且单击后样式保持不变。

$(function(){
  $('.box').on('click',function(){
      $('#wrapper').append(this);
   });
});

div.box{
  height: 100px;
  width: 200px;
  background:red;
  display: inline-block;
  text-align:center;
  color:#fff;
  font-size:26px;
  margin: 0px;
  float: left;
}
div.box:active{
  background:yellow;
}
div.box2{
  background:green;
}
div.box3{
  background:orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <!-- for box 2 -->
    <div class="box box2">7</div>
    <div class="box box2">8</div>
    <div class="box box2">9</div>
    <div class="box box2">10</div>
    <div class="box box2">11</div>
    <div class="box box2">12</div>
    <!-- for box 3-->
    <div class="box box3">13</div>
    <div class="box box3">14</div>
    <div class="box box3">15</div>
    <div class="box box3">16</div>
    <div class="box box3">17</div>
    <div class="box box3">18</div>
</div>

Answer 3

使用position:fixed;中的clicked div属性。

希望这会有所帮助。

动画单击后如何将div堆栈放置在页面底部而不影响样式

3 个答案: