个人博客: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/

写给读者的话

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

前端笔记:animate+easing用法(hexo next主题自定义动画)的更多相关文章

  1. hexo next主题深度优化(一),加入pjax功能。

    文章目录 背景: 进入正题 pjax初体验--instantclick 真正的pjax 第一步 第二步 第三步 第四步 专门基于hexo next主题的pjax(将丢失的js效果重现) 将下面讲到的提 ...

  2. jQuery中Animate进阶用法(一)

    jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...

  3. 1.前端笔记之html

    title: 1.前端笔记之HTML date: 2016-04-04 23:21:52 tags: Python categories: Python --- 作者:刘耀 **出处:http://w ...

  4. jQuery中Animate进阶用法(二)

    Step Type: Function( Number now, Tween tween )每个动画元素的每个动画属性将调用的函数.这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值. ...

  5. hexo next主题中关于pc端点击链接没问题,移动端点击链接页面不显示。

    个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 背景 hexo next主题,本人diy的时候 ...

  6. 2.前端笔记之css

    title: 1.前端笔记之CSS date: 2016-04-05 23:05:51 tags: 前端 categories: w3c --- 作者:刘耀 **出处:http://www.liuya ...

  7. jQuery animate easing使用方法

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

  8. Hexo 官方主题 landscape-plus 优化

    博主喜欢简洁大方的Hexo主题,看了不下100个主题之后,最终选择了 landscape-plus 主题(针对中国大陆地区,对Hexo官方主题landscape进行优化后的版本).更多Hexo主题资源 ...

  9. 写给后端的前端笔记:浮动(float)布局

    写给后端的前端笔记:浮动(float)布局 这篇文章主要面向后端人员,对前端有深刻了解的各位不喜勿喷. 起因 前一阵子我一个后端的伙伴问我,"前端的左飘怎么做?",我立马就懵了,& ...

随机推荐

  1. Illegal mix of collations (latin1_swedish_ci,IMPLICIT) and (utf8_general_ci...

    最近刚接触mysql,今天用mysql插入中文字符的时候,程序报错“Illegal mix of collations (latin1_swedish_ci,IMPLICIT) and (utf8_g ...

  2. Mysql的Event

    Mysql的Event Event简介 Event是mysql中的一个事件,和触发器类似,触发器是在某条sql语句执行后可能会触发,而Event是每隔一段时间或某个特定的时间点执行,可以精确到秒. 准 ...

  3. jq-demo-点击选择(英雄联盟)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Q:微信小程序一次性订阅消息(前台收集)

    说明:官方文档(https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message.ht ...

  5. Unity 2018 version class.jar path

    { C:\Program Files\Unity\Editor\Data\PlaybackEngines\AndroidPlayer\Variations\mono\Release\Classes }

  6. JAVA C 数据类型对应

    { Java—C和操作系统数据类型的对应表 Java Type C Type Native Representation boolean int 32-bit integer (customizabl ...

  7. 由于某些原因无法博客搬家,现在换马甲了 http://blog.csdn.net/qq_32066409

    由于位置原因无法博客搬家,现在换马甲到csdn了地址如下http://blog.csdn.net/qq_32066409

  8. due to a StackOverflowError. Possible root causes include a too low setting for -Xss and illegal cyclic inheritance dependencies. The class hierarchy being processed was [org.jaxen.util.AncestorAxisIt

    七月 31, 2019 4:39:01 下午 org.apache.catalina.startup.VersionLoggerListener log信息: Server version: Apac ...

  9. NEO4J中文分词全文索引自动更新解决方案

    NEO4J中文分词全文索引自动更新解决方案 一.样例数据 二.英文与中文全文索引差别 1.创建NEO4J默认索引 2.删除索引 3.创建支持中文分词的索引 三.APOC自带英文全文索引过程(可自动更新 ...

  10. windows下怎么给ubantu虚拟机全屏的处理

    ubantu版本时16.04 windows下窗口太小需要设置 相信很多人在装虚拟机的时候,遇到了窗口过小不能自适应的问题.我也是查了好多资料,都说安装Vmware Tools即可解决,还有说修改分辨 ...