我想在用户点击带动画的元素时隐藏div
。我希望div
向上滑动,然后隐藏(display: none
)onclick
。那可能吗?如果是这样,怎么样?
感谢您的帮助!
答案 0 :(得分:0)
您可以使用.slideUp()方法。
CSS
#container {
border: 3px double blue;
height: 300px;
}
HTML
<div id="container">This must slide up</div>
<button>Click me</button>
JS
$(function() {
$("button").on("click", function() {
$("#container").slideUp();
});
});
答案 1 :(得分:0)
我喜欢使用CSS3 Transitions,只需在点击时切换一个类。
http://jsfiddle.net/rz4ztgqa/2/
JS:
$(function() {
$("button").on("click", function() {
$("#container").toggleClass('collapsed');
});
});
CSS:
#container {
border: 3px double blue;
height: 300px;
transition: height .5s, opacity 1s;
}
#container.collapsed {
height:0px;
overflow:hidden;
opacity:0;}
如果你有一个功能性的理由想要设置display:none;
,你可以在动画之后立即做这样的事情:
setTimeout(function(){
$("#container").css('display', 'none');
}, 1000);
但在这种情况下,如果您希望在第二次单击按钮时再次展开div,则需要更多代码。