我的jQuery第七天动画及其一些实现原理

九依

于 2020-07-13 22:59:26 发布

阅读量260

点赞数

分类专栏：小白文章标签： js jquery

本文链接：https://blog.csdn.net/Yzhoun/article/details/107327368

版权

小白专栏收录该内容

39 篇文章 0 订阅

订阅专栏

jQuery - 动画

jQ动画插件

插件名称 jQuery Easing Plugin
目的：用于扩展jQuery动画过渡效果
链接地址
https://cdnjs.cloudflace.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js

动画相关方法

hide() show() toggle()
消失展示

  参数： null或(duration,easing,callblack)

fadeln() fadeout() fadeToggle() fadeTo()
淡入淡出

  参数： null或（duration,[opacity],easing,cacllblack）

slideDown() slideUp() slideToggle()

  参数： null或者（duration,easing,callblack）

animate()

  参数：(target duration easing callblack)

stop() finish()
```
  参数： ture false
```
delay()
jQuery.fx.off = ture

jQuery.fx.off = ture

jQuery的运动开团

animate

第一个参数（传入目标点），第二个参数（时间），第三参数（运动方式），第四个参数（回调函数）

<style>
        .demo{
            width: 100px;
            height: 100px;
            position: absolute;
            background: brown;
        }

        
    </style>
<body>
    
    <div class="demo">
        
    </div>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>        
        $('.demo').animate({width : '+=50', height :'+=50',left:'+=100',top:'+=100'},1000,'swing',function(){
            alert('over!')
        })
    </script>

实现animate and Delay 的基本原理

jQuery.prototype.myDelay = function(duration){
        var queueArr = this[0]['fx'];
        queueArr.push(function(next){
            setTimeout(function(){
                next();
            },duration)
        });
        return this;
    }
    jQuery.prototype.myAnimate = function(json, callack){
        var len = this.length;
        var self = this;
        //最后添加到队列里的内容函数
        var baseFunc = function (next){
            var times = 0;
            for(var i = 0 ; i < len; i ++){
                startMove(self[i], json, function(){
                    times ++;
                    if(times == len){
                        callack && callack();
                        next();
                    }
                })
            }
        }
        this.myQueue('fx',baseFunc);
        if(this.myQueue('fx').length == 1){
            this.myDequeue('fx');
        }
        function getStyle (obj, attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr]
            }else{
                return window.getComputedStyle(obj,false)[attr]
            }
        }
        function startMove(obj, json, callback) {
            clearInterval(obj.timer);
            var iSpeed = null, iCur = null;
            obj.timer = setInterval(function () {
                var bStop = true;
                for (var attr in json) {
                    if (attr == 'opacity') {
                        iCur = parseFloat(getStyle(obj, attr)) * 100
                    } else {
                        iCur = parseFloat(getStyle(obj, attr));
                    }
                    iSpeed = (json[attr] - iCur) / 7;
                    iSpeed = iSpeed > 0 ?  Math.ceil(iSpeed) : Math.floor(iSpeed);
                    if(attr == 'opacity'){
                        obj.style.opacity = (iCur + iSpeed) / 100;
                    }else{
                        obj.style[attr] = iCur + iSpeed + 'px'
                    }
                    if( iCur != json[attr]){
                        bStop = false;
                    }
                }
                if(bStop) {
                    clearInterval(obj.timer);
                    typeof callback == 'function' && callback()
                }
            }, 30)
        }
        return this;
    }

stop and finish

stop不传参数会阻止当前的运动，奔向下一个运动，第一个传ture，直接停止所有运动,第二个参数ture：停止当前运动，并且将dom移动值目标点

- finish直接将运动执行到目标运动
<style>
   .demo{
            width: 100px;
            height: 100px;
            position: absolute;
            background: brown;
        }

        
    </style>
</head>
<body>
    <button id="stopBtn">stop</button>
    <button id="finishBtn">finish</button>
    <button id="startBtn">start</button>
    <div class="demo"></div>
        
    </div>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>        
        $('#startBtn').on('click',function(){
            $('.demo').animate({width : '+=50', height :'+=50',left:'+=100',top:'+=100'},1000,'swing')
            .animate({width : '+=50', height :'+=50',left:'+=100',top:'+=100'},1000,'swing')
        })
        $('#stopBtn').on('click',function(){
            $('.demo').stop(true,true)
        })
        $('#finishBtn').on('click',function(){
            $('.demo').finish;
        })
    </script>

delay()

延迟多少秒（参数），之后执行

show and hide

展示隐藏

传参数，展示过程,第二个参数是控制速度快慢
展示方法

<style>
        .demo{
            width: 100px;
            height: 100px;
          
        }
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            display: none;
        }

        
    </style>
</head>
<body>
    
    <div class="demo">
        <p>Rose</p>
        <ul>
            <li>asdasd</li>
            <li>打打是</li>
            <li>的发个个</li>
        </ul>
    </div>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
        $('p').on('mouseenter', function(){
            $(this).next().show(2000,'swing')
        })
        $('.demo').on('mouseleave', function(){
            $('p').next().hide(2000,'linear')
        })
    </script>

toggle

相当于show 和 hide的集合,奇偶判断的功能

fadeIn and fadeout

淡入淡出

<style>
        .demo{
            width: 100px;
            
            background: brown;
        }
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 100px;
            height: 200px;
            display: none;
        }

        
    </style>
</head>
<body> 
    <div class="demo">
        <p>Rose</p>
        <ul>
           <li>sadasd</li>
           <li>ddddd</li>
           <li>asdasf</li>
        </ul>
    </div>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
        $('p').on('click', function(){
            if($(this).next().css('display') == 'none'){
                $(this).next().fadeIn(100)
            }else{
                $(this).next().fadeOut(100)
            }
        })
    </script>

fadeToggle

fadeIn and fadeout的集合奇偶

fadeTo

传入四个参数

    <style>
        .demo{
            width: 100px;
            
            background: brown;
        }
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 100px;
            height: 200px;
            display: none;
        }

        
    </style>
</head>
<body>
    
    <div class="demo">
        <p>Rose</p>
        <ul>
           <li>sadasd</li>
           <li>ddddd</li>
           <li>asdasf</li>
        </ul>
    </div>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
        $('p').on('click', function(){
            if($(this).next().css('display') == 'none'){
                $(this).next().fadeTo(100, 0.6, 'swing', function(){
                    console.log('over1');
                })
            }else{
                $(this).next().fadeTo(100, 0.1, 'swing', function(){
                    console.log('over2');
                })
            }
        })
    </script>

slideDown and slideUp

关注宽和高的变

<style>
        .demo{
            width: 100px;
            
            background: brown;
        }
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 100px;
            height: 200px;
            display: none;
        }

        
    </style>
</head>
<body>
    
    <div class="demo">
        <p>Rose</p>
        <ul>
           <li>sadasd</li>
           <li>ddddd</li>
           <li>asdasf</li>
        </ul>
    </div>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
        $('p').on('click', function(){
            if($(this).next().css('display') == 'none'){
                $(this).next().slideDown(100, 'swing', function(){
                    console.log('over1');
                })
            }else{
                $(this).next().slideUp(100,'swing', function(){
                    console.log('over2');
                })
            }
        })

slideToggle

关注宽和高的变化

 $('p').on('click', function(){
            $(this).next().slideToggle(300)
        })

九依

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的jQuery第七天动画及其一些实现原理

jQuery - 动画jQ动画插件插件名称 jQuery Easing Plugin目的：用于扩展jQuery动画过渡效果链接地址https://cdnjs.cloudflace.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js动画相关方法hide() show() toggle()消失展示参数： null或(duration,easing,callblack)fadeln() fadeout() fade
复制链接

扫一扫