abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jq动画效果</title> <script src="jquery-3.3.1.min.js"></script>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jq动画效果</title> <script src="jquery-3.3.1.min.js"></script> <style> div{width: 200px;height: 200px;background: blue;position: absolute;} </style> <script> // $(选择器).animate({params},speed,fn) --> 添加定位属性div可移动 // 预定义的值 宽高:'toggle' 隐藏显示 $(document).ready(function(){ $('.but1').click(function(){ $('p').animate({fontSize:'40px'},1500) }) $('.but2').click(function(){ $('div').animate({ left:'400px', opacity:'0.4',//颜色变化 height :'toggle',width:'400px' // height:'toggle' },1500) }) }) </script> </head> <body> <button>点击字体放大</button> <p>东湖效果的规范的</p> <button>点击div移动</button> <div></div> </body> </html>
语法:$(选择器).animate({params},speed,fn函数),让div移动时要添加position定位属性。预定义值toggle,隐藏谈出效果