javascript - 使用幻灯片过渡移动 div

Question

我有一个带有视频背景的页面和一个带有一些文本的 div，我想在页面中心放置一个按钮，以便当用户单击它时，当前的 div（文本）通过 css 过渡向上滑动，另一个 div 出现具有相同的过渡。

我只想移动具有固定背景的 div。

使这种效果发生的最佳方法是什么？

Answer 1

var oT = $('#old'),
  nT = $('#new').css({
    top: '+=50',
    opacity: 0
  });

$('button').one('click', function() {
  $(this).attr("disabled", "disabled");
  oT.animate({
    top: '-=50',
    opacity: 0
  }, function() {
    nT.animate({
      top: '-=50',
      opacity: 1
    });
  });
});

html,
body {
  width: 100%;
  height: 100%;
}

#container {
  width: 100%;
  height: 100%;
  background: url(http://www.quilabytes.com/wp-content/uploads/2013/06/light_shadow_blur_background_46792_1920x1200.jpg) no-repeat center;
  position: relative;
}

button {
  margin: 0 auto;
  width: 100px;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  top: 65%;
}

#old,
#new {
  width: 100%;
  position: absolute;
  top: 30%;
}

p {
  font-family: helvetica;
  color: #fff;
  text-shadow: 0px 0px 20px #000;
  font-size: 40px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">

  <div id="old">
    <p>Old Text</p>
  </div>
  <div id="new">
    <p>New Text</p>
  </div>
  <button>Click Me!</button>

</div>

Answer 2

如果 DIV 的文本绝对定位，您应该尝试animate：

$('#your_div_id').animate({'top':some_value, 'opacity':0},time);

如果您需要完全隐藏 DIV，则需要为some_value.