jQuery动画

2018-12-11 本文已影响0人 moly琴

显示隐藏

显示：show()
隐藏：hide()
显示/隐藏： toggle()

注意：主要改变的是display属性

滑入滑出

滑出：slideDown()
滑入： slideUp()
滑入/滑出：slideToggle()

注意：主要改变的是display属性

淡入淡出

淡入：fadeIn()
淡出：fadeOut()
淡入/淡出：fadeToggle()

注意：主要改变的是display和opacity属性

淡入到指定透明度

淡入到指定的透明度值： fadeTo()
注意
调用时一定要传入速度，和透明度fadeTo(3000,0.5)

动画语法：

语法：jq对象.show([speed], [easing], [fn])
参数：
1. speed : 运动的速度
  值：
  1.1 字符："slow","normal", or "fast"
  1.2 时间：毫秒计算
2. easing : 运动的曲线
  swing(默认值) : 先慢后快再慢
  linear : 匀速运动
3. fn : 回调函数
  动画结束后执行的函数

自定义动画

语法：jq对象.animate(运动的属性,运动时间,回调函数)
案例：jq对象.animate({"left" : "400px","width" : "1000px"},[运动时间],[回调函数])
运动属性：只有具有层级关系的属性才能够运动
层级关系： 1 2 3 4 5 6 ... 依次递增依次递减
案例

//需求： 点击button按钮，让div框运动起来
    $("button").click(function(){
        //一个属性运动
        //$("div").animate({"left" :"100px"},1000)

        //多个属性运动
        //$("div").animate({"left" :"100px","width" : "200px"},1000)

        //多个动画
        $("div").animate({"left" :"100px"},1000).animate({"width" :"200px"},1000)
    });

停止动画

语法： jq对象.stop(false,false)
参数：
第一个参数：是否停止执行后面的所有动画
true : 停止
false : 继续执行

第二个参数：当前动画是否立即执行到终点
true : 立即执行到终点
false : 不执行到终点

<body>
<div>
    <span>分享到</span>
    <a href="#">1</a>
    <a href="#">2</a>
</div>
</body>

<style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 100px;
            height: 200px;
            background-color: #cccccc;
            position: absolute;
            /* 大盒子也绝对定位　*/
            right: -100px;
            top: 10px;
        }
        span {
            background-color: #33f;
            width: 20px;
            position: absolute;
            right: 100px;
            color: #ffffff;
            text-align: center;
        }
    </style>

<script>
        // DOM加载事件
        $(function () {
            // 鼠标悬停事件，　合成事件
            $("div").hover(function () {
                //　stop清空动画队列，且goto到当前正在执行的动画末尾　
                $("div").stop(true,true).delay(200).animate({"right": 0},200);
                },function () {
                // 延迟动画解决反复触发展开与关闭问题
                $("div").stop(true,true).delay(200)
                        .animate({"right": "-100px"},200);
                }
            );
        });

    </script>