前端笔记: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/

写给读者的话

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

你可能感兴趣的:(Front-end,Web❤️,Personal,blogs)