javascript - 显示与隐藏动画有什么好的方案吗?
问题描述
例子
就像这个动画一样的效果,p先是隐藏的,点击按钮后显示并且有动画效果,隐藏的时候同样。但我绝对我写的太复杂,有没有更简单的方案呢(不要第三方库)!
问题解答
回答1:试试用transition:demo
回答2:比较简单的思路是:
方块无需隐藏,只需要设置高度为0就看不见了
用transition实现动画效果
不需要使用hidden和show两个类名来控制,其实它就只有两种状态,所以可以认为无show就是隐藏了
另外无需写一个show()和hide()分开绑定,其实你这个按钮点一下是展开,再点一下隐藏,用一个toggle()切换显示状态就可以了
我在你的代码上做了点修改,如下:https://jsfiddle.net/boxsnake...
回答3:<!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 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>回答4:
题主可以配合CSS3解决(如果不需要兼容IE的话)
回答5:可以用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>
相关文章:
1. ueditor上传服务器提示后端配置项没有正常加载,求助!!!!!2. Thinkphp 下载地址找不到了?3. javascript - echart+百度地图4. mybatis - Java关于Mysql的随机id生成5. mysql - 数据库建字段,默认值空和empty string有什么区别 1106. javascript - 百度地图自己的产品可以精确定位,为什么我调用他的公开API却必须经过用户同意才能获取精确定位,而且还慢?7. 怎么学好php8. 在MySQL数据库中查询表里的记录条数的代码怎么写?9. 如何更新/删除指定的两条或多条数据10. mysql - sql如何进行多个字段去重?