Jquery(十二)自定义动画

最新推荐文章于 2021-10-26 17:21:30 发布

海绵娃娃

最新推荐文章于 2021-10-26 17:21:30 发布

阅读量358

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/oneqinglong/article/details/71195419

版权

1 Jquery自定义动画

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>jQuery自定义动画</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">

    #div1{

        width:100px;
        height:100px;
        border:1px solid black;
        background:orange;
        position:relative;


    }
    body{
    padding:60px;
    }
  </style>

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

    $(document).ready(function(){

        $("#div1").click(function(){

            $(this).animate({left:"500px"},3000);
        });
    });
  </script>
  -->
<!--
   <script type="text/javascript">

    $(document).ready(function(){

        $("#div1").click(function(){

            $(this).animate({left:"+=500px"},3000);
        });
    });
  </script>
  -->

   <script type="text/javascript">

    $(document).ready(function(){

        $("#div1").click(function(){

            $(this).animate({left:"500px",height:"200px"},3000);
        });
    });
  </script>
 </head>

 <body>

  <div id="div1"></div>
 </body>
</html>

2.Jquery自定义动画2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>jQuery自定义动画2 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">

    #div1{

        width:100px;
        height:100px;
        border:1px solid black;
        background:orange;
        position:relative;


    }
    body{
    padding:60px;
    }
  </style>

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

    $(document).ready(function(){

        $("#div1").click(function(){


            $(this).animate({left:"500px",height:"200px"},3000)
            .animate({top:"100px",width:"200px"},3000).fadeOut("slow",function(){alert("动画播放完毕");});

        });

    });
  </script>
 </head>

 <body>
  <div id="div1"></div>
 </body>
</html>