使用幻灯片转换移动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指定负值。