向上滑动,并在点击时使用jquery隐藏div

时间:2015-06-20 00:10:43

标签: jquery html css

我想在用户点击带动画的元素时隐藏div。我希望div向上滑动,然后隐藏(display: noneonclick。那可能吗?如果是这样,怎么样?

感谢您的帮助!

2 个答案:

答案 0 :(得分:0)

您可以使用.slideUp()方法。

jsFiddle

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,则需要更多代码。