onClick transition and toggle visibility on div element jQuery

onClick transition and toggle visibility on div element jQuery

Here I want to create a dropdown form with transition effect on click of
element, onClick it triggers the transition but when I click again it
doesn't triggers the transition instead it just hides the div element....
Demo: http://tryitnow.net16.net/
See below:
function:
<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;
}