返回jquery自......登陆

jquery自定义动画

OneZone2019-06-12 12:17:0455

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


最新手记推荐

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

全部回复(0)我要回复

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