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>