我有一个带有视频背景的页面和一个带有一些文本的 div,我想在页面中央放置一个按钮,以便当用户单击它时,当前的 div(文本)会随着 css transition 和另一个向上滑动div 以相同的过渡显示。
我只想移动具有固定背景的 div。
实现这种效果的最佳方式是什么?
最佳答案
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>
关于javascript - 使用幻灯片过渡移动 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18243748/