onClick过渡并切换div元素的可见性

Question

在这里，我想创建一个具有单击元素的过渡效果的下拉表单，onClick会触发过渡，但是当我再次单击时，它不会触发过渡，而是仅隐藏div元素。...演示： http：// tryitnow.net16.net/

见下文：

功能：

<script>

$(function() {

    $("#login").click(function() {
        var visi= $(".User-Login").css('visibility');

        if(visi=="visible") {
            $(".User-Login").toggleClass("box-colap");
            $(".User-Login").css('visibility','hidden');    
        }
        else {
            $(".User-Login").css('visibility','visible');
            $(".User-Login").toggleClass("box-change"); 
        }       
    });
});

的HTML：

<table class="MainMenu" style="width:100%;background-color:white" align="center">
<a href="#">Home</a>
        &nbsp;
        &nbsp;
        </td>
        <td>
        <a href="#">How It Works </a>
        </td>
        <td>
        <a href="#"> Features</a>
        </td>
        <td>
        <a href="#"> Why Us </a>
        </td>
        <td>
        <a href="#"> Sign Up </a>
        </td>
        <td>
        <a id="login" href="javascript:void(0);"> Login </a>
        </td>
</table>

CSS：

 .User-Login {  

visibility:hidden;
position:absolute;
left:1150px;    


background:black;
-webkit-transition:  height 2s ease;  
-moz-transition:  height 2s ease;  
-o-transition: height 2s ease;  
-ms-transition: height 2s ease;  
transition:, height 2s ease;  
overflow:hidden;


height:10px;

 top:90px;

}  

.box-change {   
height: 250px;  
}

.box-colap {
height:10px;
}

Answer 1

来自CSS3的两个简单解决方案甚至不需要jquery

小提琴1

小提琴2

两者都使用css3

这是滑动的实际CSS代码

div{
display:block;
height:120px;
width:120px;
background:red;
}

.hideUp{
    position:relative;
    height:200px;
    width:200px;
    background:blue;
    display:block;
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
}

.hideUp:focus{
    top:-200px;
}

和HTML

<a href="#" tabindex="-1" class="hideUp"><div><p>CLICK TO MOVE</p></div></a>

:)