jQuery之动画运动

最新推荐文章于 2023-06-25 20:51:27 发布

只看五分钟佩奇的小姑姑

最新推荐文章于 2023-06-25 20:51:27 发布

阅读量369

点赞数

文章标签： jquery 动画

本文链接：https://blog.csdn.net/Aloe_904/article/details/78417422

版权

前端的尘封往事专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运动方法</title>
    <style type="text/css">
    div{width: 100px;height: 100px;background: red;margin: 10px;}
    </style>

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

    <script type="text/javascript">
    $(function(){
        $('#div1').click(function(){
            $(this).animate({width:300},2000,'linear',function(){
                //alert('123');
                $(this).animate({height:300})//width的变化用了2000毫秒，height的变化很快
            });
        })

        // $('#div2').click(function(){
        //      $('#div1').stop();默认阻止当前的运动
        //      $('#div1').stop(true);阻止后续的运动
        //      $('#div1').stop(ture,ture)可以立即停止到目标点
        //      $('#div1').finish();立即停止到所有制定的目标点

        // })

        // $('#div1').on('click',function(){
        //  alert(123);//当点击div时才会弹窗
        // })
        //$('#div1').trigger('click');//打开页面就会显示，自动调用click

    })


    $(function(){
        // $('li').click(function(){
        //  $(this).css('background','red')
        // })  事件是加在元素li上  以上的效果可以用时间委托delegate()完成

        $('ul').delegate('li','click',function(){
            $(this).css('background','red')
        })      //事件是加在元素ul上
    })


    </script>

</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>

    <ul>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
    </ul>
</body>
</html>
<!-- 
animate():执行CSS属性集的自定义动画，该方法通过CSS样式将元素从一个状态改变为另一个状态，只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。
 第一个参数：{}，可以有多个属性和值。
 第二个参数：时间，控制运动的快慢。
 第三个参数：运动形式，只有两种运动形式，默认swing(慢快慢)，linear(匀速)
 第四个参数：回调函数

 stop():让jquery中的运动停下来
 delay():延迟，里面的时间表示延迟的时间

 jquery中时间委托的方法
 delegate():事件委托，例如ul和li，对li的操作利用事件委托可以只对ul操作，原理事件冒泡
 undegate()：阻止事件委托
 trigger():主动触发事件，当页面打开，不需要鼠标操作就可以执行的事件


-->

只看五分钟佩奇的小姑姑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery之动画运动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>运动方法</title> <style type="text/css"> div{width: 100px;height: 100px;background: red;margin: 10px;} </style>
复制链接

扫一扫

专栏目录