显示和隐藏div元素的效果

Question

我有一个最初应该隐藏的div。然后在某些事件上（没关系）我希望我的div向上滑动，停留几秒钟然后再次向下滑动。我怎么能实现这一点。

Answer 1

您可以使用 slideUp() ， slideDown() 和 delay()

function anim() {
  $('div')
    // stop any previous animation
    .stop()
    // slide up the div
    .slideUp()
    // wait for 2 seconds
    .delay(2000)
    // slide down the div
    .slideDown();
}

anim();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="height:100px;width:100px;background:black"></div>

或使用 setTimeout() 代替 delay()

function anim() {
  var $div = $('div')
    // stop any previous animation
    .stop()
    // slide up the div
    .slideUp();
  // wait for 2 seconds
  setTimeout(function() {
    // slide down the div
    $div.slideDown()
  }, 2000);
}

anim();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="height:100px;width:100px;background:black"></div>