javascript - 如何使元素从display:none向下滑动？

我有一个html标记“loginBox”(<loginBox> ... </loginBox>)，当用户选择一个选项时，该标记会下拉。但是，在此之前，它已使用display:none隐藏。考虑到在此之前我必须声明它display:block并将其完全显示，如何使它下降？目前的代码只是显示和消失，使用滑盖效果看起来会更好。

CSS

loginBox {
  background:#424242;
  font-size:16px;
  color:#DEDEDE;
  line-height:25px;
  width:335px;
  padding:15px;
  padding-left:50px;
  margin-top: 9px;
  padding-bottom:25px;
  overflow-y:hidden;
  display:block;
}

.collapse {
  display:none;
}

Javascript / jQuery

($(this).hasClass('selected')) {  // the element that needs to be selected
          $("loginBox").addClass('collapse')
         } else { /*select*/
          $("loginBox").removeClass("collapse");
        }

最佳答案

这是你想要的吗？

FIDDLE

$(document).ready(function(){
    $("loginbox").addClass("collapse");
    $(":checkbox").change(function(){
        if($(this).is(":checked")){
        //$("loginBox").removeClass("collapse");
        $("loginBox").slideDown();
        }
        else
        {
            //$("loginBox").addClass("collapse");
            $("loginBox").slideUp();
        }
    });
});