前端笔记: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/
写给读者的话
看到这篇文章的你,如果文章中有错误的地方,一定要告诉我,大家共同进步!
前端笔记:animate+easing用法(hexo next主题自定义动画)的更多相关文章
- hexo next主题深度优化(一),加入pjax功能。
文章目录 背景: 进入正题 pjax初体验--instantclick 真正的pjax 第一步 第二步 第三步 第四步 专门基于hexo next主题的pjax(将丢失的js效果重现) 将下面讲到的提 ...
- jQuery中Animate进阶用法(一)
jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...
- 1.前端笔记之html
title: 1.前端笔记之HTML date: 2016-04-04 23:21:52 tags: Python categories: Python --- 作者:刘耀 **出处:http://w ...
- jQuery中Animate进阶用法(二)
Step Type: Function( Number now, Tween tween )每个动画元素的每个动画属性将调用的函数.这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值. ...
- hexo next主题中关于pc端点击链接没问题,移动端点击链接页面不显示。
个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 背景 hexo next主题,本人diy的时候 ...
- 2.前端笔记之css
title: 1.前端笔记之CSS date: 2016-04-05 23:05:51 tags: 前端 categories: w3c --- 作者:刘耀 **出处:http://www.liuya ...
- jQuery animate easing使用方法
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
- Hexo 官方主题 landscape-plus 优化
博主喜欢简洁大方的Hexo主题,看了不下100个主题之后,最终选择了 landscape-plus 主题(针对中国大陆地区,对Hexo官方主题landscape进行优化后的版本).更多Hexo主题资源 ...
- 写给后端的前端笔记:浮动(float)布局
写给后端的前端笔记:浮动(float)布局 这篇文章主要面向后端人员,对前端有深刻了解的各位不喜勿喷. 起因 前一阵子我一个后端的伙伴问我,"前端的左飘怎么做?",我立马就懵了,& ...
随机推荐
- 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 ...
- Mysql的Event
Mysql的Event Event简介 Event是mysql中的一个事件,和触发器类似,触发器是在某条sql语句执行后可能会触发,而Event是每隔一段时间或某个特定的时间点执行,可以精确到秒. 准 ...
- jq-demo-点击选择(英雄联盟)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Q:微信小程序一次性订阅消息(前台收集)
说明:官方文档(https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message.ht ...
- Unity 2018 version class.jar path
{ C:\Program Files\Unity\Editor\Data\PlaybackEngines\AndroidPlayer\Variations\mono\Release\Classes }
- JAVA C 数据类型对应
{ Java—C和操作系统数据类型的对应表 Java Type C Type Native Representation boolean int 32-bit integer (customizabl ...
- 由于某些原因无法博客搬家,现在换马甲了 http://blog.csdn.net/qq_32066409
由于位置原因无法博客搬家,现在换马甲到csdn了地址如下http://blog.csdn.net/qq_32066409
- 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 ...
- NEO4J中文分词全文索引自动更新解决方案
NEO4J中文分词全文索引自动更新解决方案 一.样例数据 二.英文与中文全文索引差别 1.创建NEO4J默认索引 2.删除索引 3.创建支持中文分词的索引 三.APOC自带英文全文索引过程(可自动更新 ...
- windows下怎么给ubantu虚拟机全屏的处理
ubantu版本时16.04 windows下窗口太小需要设置 相信很多人在装虚拟机的时候,遇到了窗口过小不能自适应的问题.我也是查了好多资料,都说安装Vmware Tools即可解决,还有说修改分辨 ...