jquery - 2回目の実行でトランジションが機能しない

Question

ここに私が欲しいものを手に入れることができたこのコードがありますが、最初の実行のみが機能します idk y 可能性があります.

HTML:

<a id="login" href="javascript:void(0);"> Login </a>

CSS:

.User-Login {  
visibility:hidden;
position:absolute;
left:1150px;
  top:90px;
background:black;
 -webkit-transition:  height 1s ease;
transition: height 1s ease; 
overflow:hidden;
height:10px;
} 
.box-change {   
height: 250px;  
}
.box-colap {
height:10px;
}

jQuery:

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

            setTimeout(function () {
                $(".User-Login").css('visibility', 'hidden');
            }, 2000);
        } else {
            $(".User-Login").css('visibility', 'visible');
            $(".User-Login").toggleClass("box-change");
        }
    });
});

Answer 1

代わりにこれを使用してみてください...

$(document).ready(function () {
    $('#login').click(function () {
        if($('.User-Login').is(':hidden') {
             $('.User-Login').slideDown();
        } else {
             $('.User-Login').slideUp();
        }
    });
});

ログイン リンクをクリックすると、ログイン ボックスが非表示になっているかどうかがチェックされます。非表示の場合は下にスライドし、そうでない場合は上にスライドします。