首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS/JQuery在单击时设置DIV动画

CSS/JQuery在单击时设置DIV动画
EN

Stack Overflow用户
提问于 2018-07-12 03:08:03
回答 4查看 95关注 0票数 1

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

https://codepen.io/deelite310/pen/BPyORp中的示例代码

代码:

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

我想做的是让div #面板在单击按钮时在按钮下方显示动画。现在,它只是在点击时“弹出”。我能做些什么来实现这一点?

示例:希望它的动画效果达到面板的最大高度

我尝试使用动画,但我不知道如何使它动画(即高度)来显示内容。

EN

回答 4

Stack Overflow用户

发布于 2018-07-12 03:22:31

您可以使用以下代码:

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

使用图像的示例工作代码:http://jsfiddle.net/ok7125dz/

票数 0
EN

Stack Overflow用户

发布于 2018-07-12 03:28:13

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

而不是

$("#panel").toggleClass("noshow");
票数 0
EN

Stack Overflow用户

发布于 2018-07-12 03:31:51

这就是你要找的东西:`

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

`

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51292619

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档