jQuery的动画效果--自定义动画

Original 2018-12-23 10:25:02 238
abstract:<!DOCTYPE html><html><head> <title>jQuery的动画效果--自定义动画</title> <meta charset="utf-8">    <script type="text/javascript" src="jq

<!DOCTYPE html>

<html>

<head>

<title>jQuery的动画效果--自定义动画</title>

<meta charset="utf-8">

    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>

    <style type="text/css">

    div{width: 200px;height: 200px;background:blue;position: absolute; color: #fff;}

    </style>

    <script type="text/javascript">  

    

        $(document).ready(function(){

          $('.but1').click(function(){

            $('p').animate({fontSize:'40px'},1500)//属性名称font-size 一律改成驼峰写法:fontSize

          })  

          //同时操作多个css属性

           //使用预定义的值 show hide toggle

           $('.but2').click(function(){

            $('div').animate({

              // left:'400px',//如果想对元素位置进行一个位移,那么我们需要给当前元素设置一个position例如:

              // opacity:'0.3',

              // height:'400px',

              // width:'400px'

              width:'toggle'

              },1500)     

          })

          $('#right').click(function(){

            $('.box1').animate({left:'+500px'},3000)

            $('.box1').animate({fontSize:'30px'},500)

          })

           $('#stop').click(function(){

            $('.box1').stop(true)

         }) 

         })


    </script>

</head>

<body>


<!-- 点击右移按钮,div右移,点击停止按钮当前效果停止 -->

<button id="right">右移</button>

<button id="stop">停止</button>

<div class="box1"> php中文网</div>

</body>

</html>


Correcting teacher:天蓬老师Correction time:2018-12-23 10:56:21
Teacher's summary:作业写的不错,最好能记录一上animate中的left,height,width的作用

Release Notes

Popular Entries