返回jq向右移动函......登陆

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

邈看银河系2019-06-25 19:38:5249

 <!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>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网