单击CSS / Jani动画DIV

Question

我有一个代码，其中我将内容隐藏在按钮下，然后单击按钮，将显示包含内容的div

示例代码在这里https://codepen.io/deelite310/pen/BPyORp

码：

$("#button").click(function(){
$("#panel").toggleClass("noshow");
});

我想做的是让div #panel进行动画处理，因为它在单击时显示在按钮下方。 现在，它只是在单击时“弹出”。 我该如何改变才能做到这一点？

示例：要使其动画到面板的最大高度

我尝试使用动画，但是我不明白如何使动画（即高度）显示内容。

Answer 1

您可以使用以下代码：

$('#panel').slideToggle(1000,'easeOutBounce');

带有图像的示例工作代码： http : //jsfiddle.net/ok7125dz/

Answer 2

$("#panel").toggle(".noshow");

代替

$("#panel").toggleClass("noshow");

Answer 3

这就是您要寻找的东西：

<div id="button"></div>
<div id="panel"></div>

#button{
  background-color:red;
  height:40px;
  width:80px;
}

#panel{
  position:absolute;
  display:none;
  background-color:green;
  height:40px;
  width:80px;
}
.moveObject{ 
  -webkit-transition:1s;
  left:100px !important;
  opacity:1 !important;
}

$("#button").on("click",function(){
  $("#panel").toggleClass("moveObject");
});

`

Answer 4

嗨，如果您对滑动操作感兴趣，可以尝试以下简单但不太优雅的代码：

CSS：

   #panel {
      text-align: center; 
      width: 100%;
      transition: max-height 1s ease-out;
      max-height: 0px;
      overflow: hidden;
   }

JS：

$("#button").click(function(){
 if (!$('#panel').hasClass("clicked")) {
   $("#panel").css("max-height", "500px").addClass("clicked");
 }
 else {
   $("#panel").css("max-height", "0px").removeClass("clicked");;   
  } 
});