Question

你能控制jQuery中前/后函数的动画速度吗？你可以用show / hide吗？例如。是否相当于$('.someClass').show('slow') 但是对于之前和之后的功能。

Answer 1

before和after根本不是动画。它们在另一个元素之前或之后将元素插入到dom中。如果要为插入的元素设置动画，可以先将其隐藏起来。然后使用before或after将其插入，然后按照您的说明使用show。

Answer 2

你的问题和詹姆斯的回答让我以这种方式“动画”{使用before / after / prepend / append函数的后果：< / p>

$('button').click(function() {
  var clickedBtn = $(this);
  el2Animate = $('.someClass');
  el2Animate.hide('fast');
  setTimeout(function() {
    if (clickedBtn.attr('id') === "before")
      el2Animate.siblings('.someOtherClass').before(el2Animate);
    else
      el2Animate.siblings('.someOtherClass').after(el2Animate);
    el2Animate.show('fast');
  }, 300); //transition delay
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>a</li>
  <li class="someOtherClass">b</li>
  <li>c</li>
  <li class="someClass">d</li>
  <li>e</li>
</ul>
<button id="before">Go2B4!</button>
<button id="after">Go2After!</button>

在show / hide中记住这一点：

可以提供
'fast'和'slow'来指示持续时间为200和600毫秒

300毫秒的setTimeout与fast配合得很好：我对结果感到满意。

jquery之前/之后的动画像show / hide

2 个答案: