使用幻灯片过渡移动 div答案

【问题标题】：Moving div with slide transition使用幻灯片过渡移动 div
【发布时间】：2013-08-17 02:45:23
【问题描述】：

我有一个带有视频背景的页面和一个带有一些文本的 div，我想在页面中心放置一个按钮，以便当用户单击它时，当前 div（文本）会随着 css 过渡和另一个div 以相同的过渡显示。

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

实现这种效果的最佳方法是什么？

【问题讨论】：

看起来像您的新产品。你应该发布你的代码尝试，如果可能的话，一个 jsfiddle。
欢迎来到 SO。向我们展示您到目前为止所做的尝试以及您遇到的问题！

标签： javascript jquery html css css-transitions

【解决方案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>

【讨论】：

谢谢，我在html中插入时不起作用，是我在这个过程中出错了吗？
我肯定会遵循所有，HTML CSS & Javascript。
您没有正确加载 jQuery。将其用于 URL：http://code.jquery.com/jquery-1.10.2.min.js
哦，是的，我忘了。 .谢谢希瓦姆，我很感激你。还有一件事。 . .我可以放一张图片而不是按钮吗？

【解决方案2】：

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

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

如果您需要完全隐藏 DIV，您需要为 some_value 分配负值。

【讨论】：