Question

我有一个JSfiddle，我正在使用here

$('button').click(function () {
  $('.box').removeClass('active');
});

$('#bone').click(function () {
  $('#one').addClass('active');
  $('#one').insertAfter($('#container :last-child'))
});

$('#btwo').click(function () {
  $('#two').addClass('active');
  $('#two').insertAfter($('#container :last-child'))
});

$('#bthree').click(function () {
  $('#three').addClass('active');
  $('#three').insertAfter($('#container :last-child'))
});

我要做的是创建一个图像滑块，当您选择图像时，它会滑过当前顶部图像的顶部。正如你在小提琴中看到的那样，它运作正常。我通过将选定的div移动到父div的最后一个子节点来使其在当前顶部的顶部滑动，从而获得所需的结果。

我的问题是，如果我说在我正在滑动的一个div中放一个段落，或另一个div或任何子元素，它将冻结我的浏览器。我只能假设每个div的移动是最后一个孩子在我移动的div也有子元素时会感到困惑...虽然我不明白为什么会破坏代码。似乎我的代码非常直接地告诉它采用包含子元素的div，并将其移动到子列表的末尾。这听起来很复杂，但是here's a crude diagram of my problem。

Answer 1

你应该尝试appendTo而不是insertAfter，看一下这个：

$('button').click(function () {
  $('.box').removeClass('active');
});

$('#bone').click(function () {
  $('#one').addClass('active');
  $('#one').appendTo($('#container'))
});

$('#btwo').click(function () {
  $('#two').addClass('active');
  $('#two').appendTo($('#container'))
});

$('#bthree').click(function () {
  $('#three').addClass('active');
  $('#three').appendTo($('#container'))
});

@keyframes slide {
  from {left: -100%;}
  to {left: 0%;}
}

#container {
  width: 100px;
  height: 100px;
  position: relative;
  left: 200px;
  border: 1px solid black;
  overflow: hidden;
}

.box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0%;
  display: block;
}

#one {
  background-color: red;
}

#two {
  background-color: blue;
}

#three {
  background-color: green;
}

.active {
  animation-name: slide;
  animation-duration: 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="bone">one</button><button id="btwo">two</button><button id="bthree">three</button>

<div id="container">
  
<div id="one" class="box">
  <p>
  Jagdish
  </p>
</div>
<div id="two" class="box"></div>
<div id="three" class="box"></div>
  
</div>

在带有子项的div上使用insertAfter会冻结我的浏览器

1 个答案: