CSS/JQuery 动画 DIV 点击答案

【问题标题】：CSS/JQuery animate DIV on clickCSS/JQuery 动画 DIV 点击
【发布时间】：2018-07-19 03:13:58
【问题描述】：

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

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

代码：

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

我想要做的是让 div #panel 在单击时显示在按钮下方的动画。现在，它只是在单击时“弹出”。我可以改变什么来实现这一点？

示例：希望它动画到面板的最大高度

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

【问题讨论】：

您的问题非常广泛。你想实现什么样的动画。我想最基本的应该是fadeIn() 看看文档

标签： javascript jquery html css

【解决方案1】：

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

而不是

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

【讨论】：

很好，我怎样才能阻止它从左侧和向下动画？只是想把它动画下来。虽然如果我超过 768 px 视口，并使面板消失，它仍然显示为：无；
$('#panel').slideToggle(1000,'easeOutBounce');正在制作动画，cf jsfiddle.net/ok7125dz...

【解决方案2】：

你可以使用这样的代码：

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

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

【讨论】：

不幸的是，这不适用于我的 onlick toggleClass。
您想在单击两次按钮时切换显示/隐藏图像吗？我的代码正在这样做......你不再需要 toggleClass
问题是内容隐藏在某个视口（低于 768 像素）。否则它会完全显示在上面。我需要在面板上切换类，以便它在低于 768px 时消失并在点击时显示。

【解决方案3】：

您好，如果您对滑动操作感兴趣，可以试试这个简单但不是很优雅的代码：

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

【讨论】：

【解决方案4】：

这就是你要找的东西： `

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

【讨论】：

谢谢，但是如果我再次单击按钮，面板不会消失。