abstrait:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jq動(dòng)畫效果</title> <script src="jquery-3.3.1.min.js"></script>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jq動(dòng)畫效果</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可移動(dòng) // 預(yù)定義的值 寬高:'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>點(diǎn)擊字體放大</button> <p>東湖效果的規(guī)范的</p> <button>點(diǎn)擊div移動(dòng)</button> <div></div> </body> </html>
語(yǔ)法:$(選擇器).animate({params},speed,fn函數(shù)),讓div移動(dòng)時(shí)要添加position定位屬性。預(yù)定義值toggle,隱藏談出效果