答案 0 :(得分:0)
您可以使用jQuery轻松地做到这一点。
使用方法.slideUp()
,您可以向上滑动折叠包含内容的div。然后使用.delay()
可以将延迟设置为5秒。为了再次显示内容,请调用.slideDown()
。
当您链接这些动画时,使该动画起作用的代码如下所示:$('.content').slideUp(500).delay(5000).slideDown(500);
要指出的一点是,使用此代码时,最好在进行动画或延迟播放时禁用再次单击该按钮。其他第一个序列一旦完成,就会被触发。
这是一个可行的例子。
$(document).ready(function() {
$('button').click(function() {
$('.content').slideUp(500).delay(5000).slideDown(500);
});
});
.content {
height: 200px;
background-color: #19c63c;
border: 1px solid #169630;
margin: 20px;
padding: 20px;
opacity: 1;
}
.hide {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Start</button>
<div class="content">content to display...</div>
如果您不想使用jQuery的动画,则可以只使用CSS来创建自己的动画。在这种情况下,您将创建一个.hide
类。将其添加到div后,将触发向上滑动动画。 5秒钟后,再次将其删除。动画过渡的CSS是transition: all .3s ease-out;
此代码如下。
var delay = 5000; // delay in milliseconds
$(document).ready(function() {
$('button').click(function() {
$('.content').addClass('hide');
setTimeout(function() {
$('.content').removeClass('hide');
}, delay);
});
});
.content {
height: 200px;
background-color: #19c63c;
border: 1px solid #169630;
margin: 20px;
padding: 20px;
transition: all .3s ease-out;
}
.hide {
height: 0;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Start</button>
<div class="content">content to display...</div>
如果您只想使用CSS解决此问题。您可以使用如下所示的内容。另请参见this JSFiddle。注意:动画立即开始。
.content {
background-color: #ccc;
height: 200px;
}
.slide-up-wait-down-animation {
animation: pulse 6000ms;
}
@keyframes pulse {
0% { height: 200px }
10% { height: 0; opacity: 0; }
90% { height: 0; opacity: 0 }
100% { height: 200px }
}
<div class="content slide-up-wait-down-animation">content to display...</div>