jq向右移动函数,动画函数,停止函数使用属性.,

Original 2019-06-25 19:38:52 287
abstract: <!DOCTYPE html> <html> <head charset='utf-8'>  <title>jq淡入淡出效果!</title>  <script type="text/javascript" src="css/jquer

 <!DOCTYPE html>

 <html>

 <head charset='utf-8'>

  <title>jq淡入淡出效果!</title>

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

  <style type="text/css">

  .box1{height: 200px;width: 200px;background:red;}

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

  button{height: 40px;width: 200px;border:none;}

 

  </style>

 </head>

 <body>

  <script type="text/javascript">

  $(document).ready(function () {

  $('.box1').hide()

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

  $('.box1').fadeIn(3000)

  $('p').animate({fontSize:'40px'},1500)

  $('.box2').animate({left:'400px'},1500)

  })

  // body...

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

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

  })

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

  $('.box2').stop()

  })

  })




  </script>

  <button class="but1">淡入</button>

  <div class="box1"></div>

  <p>jq当中我们使用的是自定义动画效果@</p>

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

  <button id="rigth">向右移动</button>

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

 

 </body>

 </html>


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

Release Notes

Popular Entries