jquery实现动画显示

Original 2018-10-31 19:13:49 236
abstract:<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>jquery的动画效果--自定义动画</title>    <script

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>jquery的动画效果--自定义动画</title>
   <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
   <style type="text/css">
div{width:100px;height:100px;background: red;position: absolute;}
   </style>
   <script type="text/javascript">
$(document).ready(function(){
           $('.but1').click(function(){
               $('p').animate({fontSize:'40px'},1500) //驼峰写法
})
           //是用预定义的值 show hide toggle
$('.but2').click(function(){
               $('div').animate({
                     left:'400px',
opacity:'0.3',
height:'400px',
width:'400px'
// width:'toggle',
                   // height:'toggle'
},1500) //驼峰写法
})
       })
   </script>
</head>
<body>
<button class="but1">点击字体放大</button>
<p>jquery中使用animate()方法创建自定义的动画</p>
<button class="but2">点击移动div</button>
<div></div>
</body>
</html>

理解:动画效果挺好玩的。

Release Notes

Popular Entries