jquery自定义动画

Original 2019-06-12 12:17:04 193
abstract:<!DOCTYPE html><html><head> <title>jQuery自定义动画</title> <link rel="icon" type="image/x-icon" href="static/images/favicon.ico">  &n

<!DOCTYPE html>

<html>

<head>

<title>jQuery自定义动画</title>

<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">

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

    <style type="text/css">

       *{margin:0;padding: 0; }

div{width:200px;height: 200px;background: red; position: absolute;}


</style>

</head>

<body>



<script type="text/javascript">

        $(document).ready(function(){

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

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

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

          })

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

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

         }) 

         })

</script>


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

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

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

<div class="box1">大家好</div>


</body>

</html>


Correcting teacher:查无此人Correction time:2019-06-13 09:11:33
Teacher's summary:完成的不错。每行js和jq语句结束增加;号。继续加油

Release Notes

Popular Entries