jQuery学习笔记(2)

最新推荐文章于 2024-01-20 21:49:50 发布

旺哥萌死了

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量611

点赞数

本文链接：https://blog.csdn.net/watasihakami/article/details/21953461

版权

HTML5 同时被 3 个专栏收录

23 篇文章 0 订阅

订阅专栏

HTML

22 篇文章 0 订阅

订阅专栏

jquery

7 篇文章 0 订阅

订阅专栏

中午好！

jQuery animate()方法允许自定义动画.有4个参数

参数:
prop 定义形成动画的CSS样式,几乎可以用所有的CSS样式,
speed 动画的速度
easing 不同的动画点中设置动画速度的
callback animate()函数执行完之后，要执行的函数
例子:

<script src="/jquery/jquery-2.1.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                var div=$("div");
                div.animate({ height: '300px' });//例子只用第1个参数
                div.animate({ width: '300px'});
                div.animate({ height: '100px' });
                div.animate({ width: '100px' });
                div.animate({ left: '250px' });
                div.animate({ fontSize: '3em' });
                div.animate({ height: 'hide' });
            });
        });
    </script>
</head>
<body>
    <button>开始</button>
    <div style="background:#4cff00;position:absolute;height:100px;width:100px">字</div>
</body>

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。

例子:

 <script src="/jquery/jquery-2.1.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#start").click(function(){
                $("div").animate({width: '300px'},3000);
     
            });
            $("#stop").click(function () {
                $("div").stop();
            });
        });
    </script>
</head>
<body>
    <button id="start">开始</button>
    <button id="stop">停止</button>
    <div style="background:#4cff00;position:absolute;height:100px;width:100px"></div>
</body>

jQuery Callback 函数刚刚说动画第4是参数的callback animate()函数执行完之后，要执行的函数
这个参数很多方法也有如hide(speed,callback)第1个参数时间，第2个参数就是这个函数了
例子:

      <script type="text/javascript" src="/jquery/jquery-2.1.0.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("button").click(function () {
                    $("p").hide(3000, function () {
                        alert("这是hide()运行完后运行");
                    });
                });
            });
        </script>
    </head>
    <body>
        <button type="button">消失</button>
        <p>点击会消失</p>
    </body>

jQuery 方法链接,如需链接一个动作，您只需简单地把该动作追加到之前的动作上
例子:

<script src="/jquery/jquery-2.1.0.js"></script>
<script>
$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red")
      .slideUp(2000)
      .slideDown(2000);
  });
});
</script>
</head>

<body>

<p id="p1">加油！自己还要更努力 ！</p>
<button>点击这里</button>

</body>
</html>

旺哥萌死了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记(2)

中午好！jQuery animate()方法允许自定义动画.有4个参数参数:prop 定义形成动画的CSS样式,几乎可以用所有的CSS样式,speed 动画的速度easing 不同的动画点中设置动画速度的callback animate()函数执行完之后，要执行的函数例子: $(document).ready(function () {
复制链接

扫一扫