example
It has the same effect as this animation. p is hidden first. After clicking the button, it is displayed and has animation effect. It is the same when it is hidden. But I definitely wrote it too complicatedly. Is there a simpler solution (without third-party libraries)?
为情所困2017-06-30 10:01:55
The simpler idea is:
The block does not need to be hidden, just set the height to 0 and it will be invisible
Use transition to achieve animation effects
There is no need to use the two class names hidden and show to control it. In fact, it only has two states, so it can be considered that without show it is hidden
In addition, there is no need to write a show() and hide() to bind them separately. In fact, you can click this button to expand it, click it again to hide it, and use a toggle() to switch the display state
I made some modifications to your code, as follows:
https://jsfiddle.net/boxsnake...
女神的闺蜜爱上我2017-06-30 10:01:55
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.box{
background: red;
height: 200px;
width: 200px;
transition: height 0.8s;
}
</style>
<body>
<button onclick="changeHeight()">click me</button>
<p class="box" style="height: 0;"></p>
</body>
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function changeHeight(){
var box=$('.box')
if($('.box').height()!=0){
$('.box').height(0)
}else{
$('.box').height(200)
}
}
</script>
</html>習慣沉默2017-06-30 10:01:55
The question can be solved with CSS3 (if it does not need to be compatible with IE)
高洛峰2017-06-30 10:01:55
Can it be implemented with jquery?
//头部引入jquery,toggle()
<body>
<p>bugbugbug</p>
<button>Toggle</button>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("p").toggle(1000);
});
});
</script>
</body>