jQuery Easing 使用方法及其图解

最新推荐文章于 2021-12-22 20:46:26 发布
转载 最新推荐文章于 2021-12-22 20:46:26 发布 · 177 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/interstellar/p/6562446.html
文章标签：

#javascript #ViewUI

本文深入解析了jQuery中的动画功能，特别是自定义动画函数.animate的使用方法。涵盖了参数详解、内置动画函数、easing效果扩展等内容，并附带了丰富的示例代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

从jQuery API 文档中可以知道，jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数：

 

  • properties：一组包含作为动画属性和终值的样式属性和及其值的集合
  • duration(可选)：动画执行时间，其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
  • easing(可选)：要使用的过渡效果的名称，如："linear" 或"swing"
  • complete(可选)：在动画完成时执行的函数
其中参数easing默认有两个效果："linear"和"swing"，如果需要更多效果就要插件支持了， jQuery Easing Plugin提供了像"easeOutExpo"、"easeOutBounce"等30多种效果，大家可以 点击这里去看每一种easing的演示效果，下面详细介绍下其使用方法及每种easing的曲线图。
 
 

引入之后，easing参数可选的值就有以下32种：

  1. linear
  2. swing
  3. easeInQuad
  4. easeOutQuad
  5. easeInOutQuad
  6. easeInCubic
  7. easeOutCubic
  8. easeInOutCubic
  9. easeInQuart
  10. easeOutQuart
  11. easeInOutQuart
  12. easeInQuint
  13. easeOutQuint
  14. easeInOutQuint
  15. easeInExpo
  16. easeOutExpo
  17. easeInOutExpo
  18. easeInSine
  19. easeOutSine
  20. easeInOutSine
  21. easeInCirc
  22. easeOutCirc
  23. easeInOutCirc
  24. easeInElastic
  25. easeOutElastic
  26. easeInOutElastic
  27. easeInBack
  28. easeOutBack
  29. easeInOutBack
  30. easeInBounce
  31. easeOutBounce
  32. easeInOutBounce                         

jQuery 1.4版本中对animate()方法，easing的方法进行了扩展，支持为每个属性指定easing方法，详细请参考这里，如：

$(myElement).animate({  
    left: [500, 'swing'],  
    top: [200, 'easeOutBounce']  
});

 

也可以用另外一种写法：

$(myElement).animate({  
    left: 500,  
    top: 200  
}, {  
    specialEasing: {  
        left: 'swing',  
        top: 'easeOutBounce'  
    }  
});

 

使用jQuery内置动画函数如slideUp()、slideDown()等来指定easing效果，以下两种方法都可以：

$(myElement).slideUp(1000, method, callback});  
$(myElement).slideUp({  
    duration: 1000,   
    easing: method,   
    complete: callback  
});

 

jQuery easing 图解

以下图解可以让你更容易理解每一种easing的效果
1. linear2. swing3. easeInQuad4. easeOutQuad5. easeInOutQuad6. easeInCubic
7. easeOutCubic8. easeInOutCubic9. easeInQuart10. easeOutQuart11. easeInOutQuart12. easeInQuint
13. easeOutQuint14. easeInOutQuint15. easeInExpo16. easeOutExpo17. easeInOutExpo18. easeInSine
19. easeOutSine20. easeInOutSine21. easeInCirc22. easeOutCirc23. easeInOutCirc24. easeInElastic
25. easeOutElastic26. easeInOutElastic27. easeInBack28. easeOutBack29. easeInOutBack30. easeInBounce
    
31. easeOutBounce32. easeInOutBounce     
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹跳</title>
    <link rel="stylesheet" href="css/demo.css">
    <script src="js/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script src="js/demo.js"></script>
</head>
<body>
<div style="width: 80%;margin: 40px auto;padding: 10px;">
    <div class="item">
        <div id="item-container" class="item-container"></div>
        <div id="item-shadow" class="item-shadow"></div>
    </div>
    <div class="item">
        <div class="item-container"></div>
        <div class="item-shadow"></div>
    </div>
</div>
</body>
</html>
demo 
*{
    margin: 0;
    padding: 0;
}
.item{
    position: relative;
    display: inline-block;
    width: 300px;
    height: 200px;
    margin: 20px;
}
.item-container{
    position: absolute;
    z-index: 99;
    width: 300px;
    height: 200px;
    border-radius: 20px;
    background-color: #434343;
    border: 3px solid #242424;
    cursor: pointer;
    /*
    使用多层阴影实现<span class="wp_keywordlink_affiliate"><a href="http://www.yyyweb.com/tag/%e6%8c%89%e9%92%ae" title="查看按钮中的全部文章" target="_blank">按钮</a></span>立体效果
    第一层：Y轴偏移1像素、不透明度为0.25的白色外阴影效果
    第二层：Y轴偏移1像素、不透明度为0.25的白色内阴影效果
    第三层：偏移位0、不透明度为0.25的黑色外阴影效果
    第四层：Y轴偏移20像素、不透明度为0.03的白色内阴影效果
    第五层：X轴偏移-20像素、Y轴偏移20像素、不透明度为0.15的黑色内阴影效果
    第六层：X轴偏移20像素、Y轴偏移20像素、不透明度为0.05的白色内阴影效果
    */
    box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
}
.item-shadow{
    position: absolute;
    top: 205px;
    z-index: 1;
    width: 290px;
    height: 10px;
    margin-left: 5px;
    border-radius: 30% 30% 50% 50%/50%;
    background-color: #000;
    opacity: 0.85;
    box-shadow: 0 0 10px 8px #000;
}
demo.css 
jQuery.easing['jswing'] = jQuery.easing['swing'];

jQuery.extend( jQuery.easing,
    {
        def: 'easeOutQuad',
        swing: function (x, t, b, c, d) {
            //alert(jQuery.easing.default);
            return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
        },
        easeInQuad: function (x, t, b, c, d) {
            return c*(t/=d)*t + b;
        },
        easeOutQuad: function (x, t, b, c, d) {
            return -c *(t/=d)*(t-2) + b;
        },
        easeInOutQuad: function (x, t, b, c, d) {
            if ((t/=d/2) < 1) return c/2*t*t + b;
            return -c/2 * ((--t)*(t-2) - 1) + b;
        },
        easeInCubic: function (x, t, b, c, d) {
            return c*(t/=d)*t*t + b;
        },
        easeOutCubic: function (x, t, b, c, d) {
            return c*((t=t/d-1)*t*t + 1) + b;
        },
        easeInOutCubic: function (x, t, b, c, d) {
            if ((t/=d/2) < 1) return c/2*t*t*t + b;
            return c/2*((t-=2)*t*t + 2) + b;
        },
        easeInQuart: function (x, t, b, c, d) {
            return c*(t/=d)*t*t*t + b;
        },
        easeOutQuart: function (x, t, b, c, d) {
            return -c * ((t=t/d-1)*t*t*t - 1) + b;
        },
        easeInOutQuart: function (x, t, b, c, d) {
            if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
            return -c/2 * ((t-=2)*t*t*t - 2) + b;
        },
        easeInQuint: function (x, t, b, c, d) {
            return c*(t/=d)*t*t*t*t + b;
        },
        easeOutQuint: function (x, t, b, c, d) {
            return c*((t=t/d-1)*t*t*t*t + 1) + b;
        },
        easeInOutQuint: function (x, t, b, c, d) {
            if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
            return c/2*((t-=2)*t*t*t*t + 2) + b;
        },
        easeInSine: function (x, t, b, c, d) {
            return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
        },
        easeOutSine: function (x, t, b, c, d) {
            return c * Math.sin(t/d * (Math.PI/2)) + b;
        },
        easeInOutSine: function (x, t, b, c, d) {
            return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
        },
        easeInExpo: function (x, t, b, c, d) {
            return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
        },
        easeOutExpo: function (x, t, b, c, d) {
            return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
        },
        easeInOutExpo: function (x, t, b, c, d) {
            if (t==0) return b;
            if (t==d) return b+c;
            if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
            return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
        },
        easeInCirc: function (x, t, b, c, d) {
            return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
        },
        easeOutCirc: function (x, t, b, c, d) {
            return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
        },
        easeInOutCirc: function (x, t, b, c, d) {
            if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
            return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
        },
        easeInElastic: function (x, t, b, c, d) {
            var s=1.70158;var p=0;var a=c;
            if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
            if (a < Math.abs(c)) { a=c; var s=p/4; }
            else var s = p/(2*Math.PI) * Math.asin (c/a);
            return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
        },
        easeOutElastic: function (x, t, b, c, d) {
            var s=1.70158;var p=0;var a=c;
            if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
            if (a < Math.abs(c)) { a=c; var s=p/4; }
            else var s = p/(2*Math.PI) * Math.asin (c/a);
            return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
        },
        easeInOutElastic: function (x, t, b, c, d) {
            var s=1.70158;var p=0;var a=c;
            if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
            if (a < Math.abs(c)) { a=c; var s=p/4; }
            else var s = p/(2*Math.PI) * Math.asin (c/a);
            if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
            return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
        },
        easeInBack: function (x, t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            return c*(t/=d)*t*((s+1)*t - s) + b;
        },
        easeOutBack: function (x, t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
        },
        easeInOutBack: function (x, t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
            return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
        },
        easeInBounce: function (x, t, b, c, d) {
            return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
        },
        easeOutBounce: function (x, t, b, c, d) {
            if ((t/=d) < (1/2.75)) {
                return c*(7.5625*t*t) + b;
            } else if (t < (2/2.75)) {
                return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
            } else if (t < (2.5/2.75)) {
                return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
            } else {
                return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
            }
        },
        easeInOutBounce: function (x, t, b, c, d) {
            if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
            return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
        }
    });
jquery.easing.1.3.js 
/**
 * Created by Administrator on 2017/3/16.
 */
$(function(){
    $(".item-container").hover(function(){
        upHover(this);
    },function(){
        downHover(this);
    });
});
function upHover(obj){
    $(obj).animate({
        top:'-20px'
    },{
        easing:'easeInOutQuint'
    });
    $(obj).next().animate({
        width:'310px',
        'margin-left':'-5px',
        opacity:'0.7',
        'box-shadow':'0 0 16px 16px #000'
    },{
        easing:'easeInOutQuint'
    });
}
function downHover(obj){
    $(obj).animate({
        top:'0'
    },{
        duration: 1000,
        easing:'easeOutBounce'
    });
    $(obj).next().animate({
        width:'290px',
        'margin-left':'5px',
        opacity:'0.9',
        'box-shadow':'0 0 10px 8px #000'
    },{
        duration: 1000,
        easing:'easeOutBounce'
    });
}
demo.js

转载于:https://www.cnblogs.com/interstellar/p/6562446.html

Uncaught TypeError: jQuery.easing[jQuery.easing.def] is not a function
c_x_m的博客
03-31 2423
报错：Uncaught TypeError: jQuery.easing[jQuery.easing.def] is not a function 原因 当我用vue-superslide 时报错以上信息，问题原因是多个JQuery引入 –由于我在public的index.html引用了luckysheet和在main.js 引入了superslide 解决方案 在代码页面单独引入superslide 如果你的是多个jQuery引入 ，你可以选择删除掉一个 Created with Raph
jquery.easing的使用
weixin_30924087的博客
10-21 210
下载地址:http://www.jb51.net/jiaoben/32922.html 基本语法：easing:格式为json,{duration:持续时间,easing:过渡效果,complete:成功后的回调函数} 介绍：easing是jquery的一个插件，使用它可以创建更加绚丽的动画效果。 环境：因为easing是jQuery的插件，所以必须是在引入jquery之后再引入它，如下： ...
jquery.easing.js缓动函数插件的用法
web前端开发-linglong
06-30 2788
jQuery 提供了一些诸如 show、hide、slideUp、fadeIn 等等动画方法，可以方便的切换元素的显隐。更有强大的自定义动画方法 animate ，可以实现很多动画效果。为了让动画有好的过渡变化过程，官方为这些方法设置 easing 属性，但是官方没有给出很多过渡效果。 jquery.easing.js 这个插件，增加了很多过渡效果，引入之后可以让动画过渡过程更加多样化。
jQuery Easing 动画效果扩展详细讲解
weixin_30951743的博客
06-08 113
今天介绍的是jQuery Easing 插件，非常的小。美化排版后是130行左右，要是压缩了那就更小了。这个插件弥补了jquery里面的动画效果的不足，是其动画效果更加强悍。如此强大而且小的插件，如果不好好加以利用，真是浪费。很多国内的朋友就是使用其中的一些效果，几个简单的参数。很少有人整理所有效果的参数。下面是我整理出来的：linear，swing，jswing，easeInQuad，ease...
jQuery animate easing使用方法图文详解
10-22
值得注意的是，jQuery 1.4版本对animate方法进行了扩展，现在支持为每个属性单独指定easing效果。这意味着可以为一个元素的不同属性设置不同的动画过渡效果，从而创造出更加丰富和复杂的动画效果。 举例来说，可以...
浅谈jQuery animate easing的具体使用方法(推荐)
11-22
然后在animate方法中使用这些自定义的easing效果，如下所示： ```javascript $(myElement).animate({ top: 500, opacity: 1 }, 1000, 'easeOutBounce'); ``` 这段代码会让`myElement`元素在1秒钟内（1000毫秒）以...
jquery.easing.js_jquery.easing.js_passageztr_
10-03
《jQuery Easing插件：模拟拖拽轨迹与生成轨迹数据》 在Web开发中，jQuery库因其简洁的API和强大的功能而备受青睐。而在动画效果方面，jQuery Easing插件则为开发者提供了更为丰富的可能性。本文将深入探讨jQuery ...
jquery.superslide 参数分析
齐枫的博客
12-13 2978
插件中允许我们自定义的参数就下面这么多，但是，实现大多数功能都够了 ! function (a) { a.fn.slide = function (b) { return a.fn.slide.defaults = { type: "slide", effect: "fade", autoPlay:
jQuery——入门（二）动画
Gemini仔仔的专栏
09-13 429
jQuery —— 入门（二）动画/效果 一、案例解析 hide([speed,[easing],[fn]]) []：意思表示的方括号中的东西是可选的，可有可无的； []中，会有对应的参数名称【变量名称】，根据变量名称，有一个表面的认识。 二、基础动画效果 —— show（）、hide（） 显示与隐藏 1、show（）—— 显示效果  将选择器选中的标签显示到页面上
jQuery插件总结一
qq_41985570的博客
08-11 723
一、jQuery Easing动画效果扩展插件 使用步骤： 引入Easing JS、CSS文件 设置jQuery动画效果 jQuery.easing.def = “method”;//如：easeOutExpo jQuery默认动画 支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery内置的动画效果，使用代码如下： $(elemen...
jQuery效果（显示隐藏，滑动，淡入淡出，自定义动画）
xy_is_fhh的博客
12-22 1257
jQuery显示隐藏 show() 显示 show([speed,[easing],[fn]]) 参数都可以省略 speed：三种预定速度之一的字符串("slow"、"normal"、"fast")或表示动画时长的毫秒数值。 easing：用来指定切换效果，默认是"swing"，可用参数"linear" fn：回调函数，在动画完成时执行的函数，每个元素执行一次 hide() 隐藏 toggle() 显示隐藏切...
jquery.easing.js的使用示例
vcxiaohan的博客
11-29 5661
本插件是在jquery原有的动画基础上的拓展 可供选择的效果有匀速运动、变加速运动、缓冲波动效果： linear，swing，jswing，easeInQuad，easeOutQuad，easeInOutQuad，easeInCubic， easeOutCubic，easeInOutCubic，easeInQuart，easeOutQuart，easeInOutQuart， easeInQui
jQuery动画的easing插件Demo
cc943965361的博客
03-26 438
一、前言 从jQuery API 文档jQuery API 文档中可以知道，jQuery自定义动画的函数 $().animate( properties [, duration] [, easing] [, complete] ) 有四个参数： properties：一组包含作为动画属性和终值的样式属性和及其值的集合 duration(可选)：动画执行时间，其值可以是三种预定速度之一的字符串(“...
Jquery----easing内置的动画效果
Damys
05-29 2669
$(".slide-con").animate({marginLeft:-(143 * num)}, 500, 'easeOutQuad')
animejs走马灯_使用anime.js绘制的五角星闪烁动画
weixin_42099755的博客
12-31 321
JavaScript语言：JaveScriptBabelCoffeeScript确定var timeline = anime.timeline({autoplay: true,direction: 'normal',loop: true});timeline.add({targets: '.favorite__inactive',scale: {value: [1, 0],duration: 40...
jquery.easing.js 使用动画过度效果
xiaozhu0301的博客
06-12 1232
使用 jquery.easing.js 增强动画过渡效果 jQuery 提供了一些诸如 show、hide、slideUp、fadeIn 等等动画方法，可以方便的切换元素的显隐。更有强大的自定义动画方法 animate ，可以实现很多动画效果。为了让动画有好的过渡变化过程，官方为这些方法设置 easing 属性，但是官方没有给出很多过渡效果。 jquery.easing.js 这个插件，
Easing 缓动函数收集
灵台方寸山斜月三星洞
11-10 1174
之前收集了不少链接，结果久了都404了。还是得复制一份代码过来才放心。 缓动函数 ECharts图表 来自​ECharts Demo Easing​ const easingFuncs = { linear: function (k) { return k; }, quadraticIn: function (k) { return k * k; }, quadraticOut: function (k) { return k * (2 - k); },
jQuery Easing实现多样化div切换效果演示
为了使用jQuery Easing插件，首先需要引入jQuery库以及jQuery Easing插件到你的项目中。然后，你可以在`animate()`方法中指定一个特定的easing函数名称，来实现你想要的效果。 下面是一些基本的示例代码，展示如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值