javascript - 如何让元素从显示:none?下滑

Question

我有一个 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"); 
        }

Answer 1

这是你想要的吗？

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(); 
        }
    });
});