前端笔记:animate+easing用法（hexo next主题自定义动画）

个人博客：https://mmmmmm.me
源码：https://github.com/dataiyangu/dataiyangu.github.io

easing介绍

animate默认是有加速度函数的linear(匀速)和swing(开始和结束慢，中间快)，其中swing是jquery默认的easing函数，希望有更多的加速度变化，比如匀加速，弹跳等，物理知识，不显摆了~

背景

hexo next左面点击隐藏出现我的sidebar

代码

function header_left() {
  var block = false;
  $(".header_sidebar").click(function () {
    var header_width = '80px';
    if (block == false) {
    //下面的easing完了之后回调，因为在移动端还有东西不显示
      $(".header_left_inner").animate({width:'80px',opacity:"show"},
        {duration:1000, easing:"easeOutBounce",complete:function () {
            $(".header_left_inner .site-nav").css("display", "block");
          }}
        );
      $("body").animate({marginLeft: "80px"},300)
      block = true
    } else {
      $(".header_left_inner").animate({width: "0px",opacity:"hide"},
        {duration:1000, easing:"easeOutBounce",complete:function () {
            $(".header_left_inner .site-nav").css("display", "none");
          }}
      );
      $("body").animate({marginLeft: "0px"},300)
     block = false
    }
  });
}

header_left()

从实例中学习

easing插件下载地址：
https://www.jb51.net/jiaoben/32922.html#downintro2
下载并引用：
注意：下面我用的require，没有用的同学，直接

//
require.config({
  paths: {
    "easing":"/js/src/pjax/easing/jquery.easing.1.3",
  },

  shim: {
    'header_left': {
      deps: [
        'easing'
      ]
    }
  }
});
require(['easing'], function (){
});

如这段代码

 $(".header_left_inner").animate({width:'80px',opacity:"show"},
        {duration:1000, easing:"easeOutBounce"}
        );

{duration:1000, easing:“easeOutBounce”}是easing的调用方式，json格式的。
各个动作函数的实例展示：http://www.runoob.com/jqueryui/api-easings.html

晚上发现的问题

在电脑端是没问题的，在移动端出现了问题，动画没问题，里面的内容不显示了，这个时候记得下午google的时候easing函数可以进行callback，于是产生了下面的代码

$(".header_left_inner").animate({width:'80px',opacity:"show"},
        {duration:1000, easing:"easeOutBounce",complete:function () {
            $(".header_left_inner .site-nav").css("display", "block");
          }}
        );

easing格式参考博客地址：http://code.ciaoca.com/jquery/easing/

写给读者的话

看到这篇文章的你，如果文章中有错误的地方，一定要告诉我，大家共同进步！

转载于:https://www.cnblogs.com/LeesinDong/p/10835544.html