zepto 扩展animate

2024-08-23

zepto 添加 animate组件

今天发现JQuery可以用 animate方法回到顶部,心想着zepto应该也可以 $('html,body').animate({ scrollTop: 0 }, 1000); 于是便用了一下,发现console提示zepto没有这个方法,百度之后发现原来不是没有这个方法,是因为这animate这个方法是在effects组件里的,然而默认的zepto是没有这个组件的,于是又倒腾了一下. 1.要安装node和npm 2.到https://github.com/madrobby/zepto下载ze

使用zepto中animate报错“Uncaught TypeError: this.bind is not a function”的解决办法

在使用zepto时,我先引入zepto.min.js,然后引入fx.js,但是在使用animate函数时,控制台却报如下错误: Uncaught TypeError: this.bind is not a function 解决办法: 1.去github中打开src/fx.js,打开链接,把内容添加到zepto.min.js中,问题就解决了.然后需要什么模块就向zepto.min.js中添加该模块的内容,最后只用引入zepto.min.js. 2.zepto的定制: (1)安装nodejs环境

animate is not a function（zepto 使用报错）[转]

animate is not a function(zepto 使用报错) 1.为什么使用zepto写animate报错? 因为zepto默认构建包含: Core, Ajax, Event, Form, IE几个模块,要使用animate需要再引用fx模块. 下面附上 fx模块的链接:fx 或者: 引入这个zepto.fx.js 即可! /** * Zepto.fx.js * * 这个功能是Zepto封装的插件animate动画包 * 1. 根据浏览器属性获取前缀,并设置cssReset的属性名

zepto不支持animate({scrollTop:"100px"})的解决办法

在移动web项目的开发中,遇到一个通过点击页面自动到相应的楼层处的需求,最初的想法就是使用html的target属性进行切换,但实际效果十分死板,显得毫无交互性.该前端架构采用zepto这个轻库进行开发,它具有类似jQuery的语法,之后采用了animate({scrollTop:"100px"})这个函数进行页面的动画滚动,结果就是毫无效果. 通过查询zepto fx包的源码 transform = prefix + 'transform' cssReset[transitionPr

Zepto 使用过程中遇到的问题总结

简言之,zepto 是移动端的 jQuery,虽然很多地方不完全相同,不过详细的内容就不介绍了,主要把使用 zepto 时遇到过的问题总结一下. zepto 是分成多个模块的,最基础的文件不包含 touch(事件监听模块).fx(animate方法).selector(jQuery选择器扩展) 等模块,需要的话要自行打包整合(github地址:https://github.com/madrobby/zepto),当报某个方法错误或者无该方法时,记得先查看自己引用的 zepto 文件里是否包含该模

【小贴士】关于transitionEnd/animate的一个有趣故事

前言在很久之前,我们项目有一个动画功能,功能本身很简单,便是典型的右进左出,并且带动画功能以当时来说,虽然很简单,但是受限于框架本身的难度,就直接使用了CSS3的方式完成了功能当时主要使用transform与animation实现功能,并且用了一个settimeout执行回调,然后此事便不了了之了但是出来混总是要还的,这不,最近相似的东西又提了出来,我们当然可以将原来的那套东西拿来用,但是看着那个settimeout总是不是滋味,因为这样捕捉回调的效果以及可能引起的BUG大家都懂,于是就

zepto和jquery的区别，zepto的不同使用8条小结

说到诡异事件发生的原因,自然是想到两者之间的差异性. 首先是效果: jquery中有fadeIn和fadeOut两个效果,用来实现渐隐渐显的效果,这个在PC端自然是常用的效果.然后我们前端组的组员Mr Huang自然是想到手机页面也可以更加炫丽,于是加上了登录框的渐隐效果.给用户缓冲的效果不错. 但是,zepto中并没有fadeIn和fadeOut,怎么办?难道真的就无法满足Mr Huang的愿望了吗?No. I will do it.在zepto中有个动画效果(animate),用这个效果来实

zepto的bug2

zepto的animate()源码采用css3的方式进行,而scrollTop属性不在css3的动画属性中,所以zepto不支持animate({scrollTop:"100px"}),可以用 $("body").scrollTop(0); 像表单元素checkbox的prop和attr用法,在zepto中不识别prop,做比较还是用attr,click有200秒到300秒的延迟.zepto事件委托和jquery不一样.tap事件的bug.隐藏元素,zepto不能获

zepto和jquery的区别，zepto的不同使用8条小结会JS就会zepto

1. Zepto 对象不能自定义事件例如执行: $({}).bind('cust', function(){}); 结果: TypeError: Object has no method 'addEventListener' 解决办法是创建一个脱离文档流的节点作为事件对象: 例如: $('').bind('cust', function(){}); 2. Zepto 的选择器表达式: [name=value] 中value 必须用双引号 " or 单引号 ' 括起来例如执行:$(

前端笔记之移动端&响应式（上）媒体查询&Bootstrap&动画库&zepto&velocity

一.媒体(介)查询 1.1 基本语法媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有:width.height和color(等).使用媒体查询可以在不改变页面内容的情况下,为特性的一些输出设备定制显示效果. 使用 @media 查询,你可以针对不同的媒体类型(媒体.媒介)定义不同的样式.@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. 基本语法: @media 约束词媒体类型

学习笔记：Zepto笔记

1.Zepto对象不能自定义事件例如执行:$({}).bind('cust',function(){}); 结果:TypeError:Object#hasnomethod'addEventListener' 解决办法是创建一个脱离文档流的节点作为事件对象: 例如:$('').bind('cust',function(){}); 2.Zepto的选择器表达式:[name=value]中value必须用双引号"or单引号‘括起来例如执行:$('[data-userid=123123123]')

Zepto和Jquery区别

---恢复内容开始--- <zepto移动端事件> 1.$("#xx").tap(function(){ //tap在屏幕点击时触发 alert("sssss"): }) 2.$("div").singleTap(function(){ //singleTap在屏幕单击时触发 alert("单击"): }) 3.$("div").doubleTap(function(){ //doubleTap

项目中遇到的各种bug和踩过的坑

zepto 赋值时单位转换问题 zepto 的 animate 方法移动某个元素的位置时,例如修改某个绝对定位的元素的 left 值,要与修改前的值单位一致,修改前如果是像素值,修改后也要是像素值,否则android 手机上将不会出现动画效果,而是直接把元素放到修改后的位置.使用 jQuery 时会进行计算并最后赋值为像素值,zepto 省略了转换所以会有单位问题,需要注意. transform:rotate 在 Safari 中渲染 bug transform:rotateY, transf

如何停止CSS3的动画？

前言我们在移动端一般使用zepto框架,与其说zepto是jquery的轻量级替代版,不如说是html5替代版我们在js中会用到animate方法执行动画,这个家伙可是真资格的动画,完全是css一点点变化的!而zepto则不然,使用的是HTML5/CSS3的方案,而CSS相关是不保存元素状态值的,也没办法保存,所以停止动画就成了一大问题我们今天就一起来讨论下相关停止动画的方案,反正没有什么好的...... CSS3动画原理在现有浏览器中,一般有两种模式(我只知道两种):一种是js动画,他是动

jquery动画总结

基本动画 show() //直接显示元素,没有动画 show(speed, [callback]) //有动画,有回调函数 hide() //直接隐藏元素,没有动画 hide(speed, [callback]) //有动画,有回调函数 toggle() //切换可见状态 toggle(speed, [callback]) //有动画效果 toggle(switch) //switch决定是显示还是隐藏滑动动画 slideDown(speed, [callback]) //向下增加高度,以显示

JS如何监听动画结束

场景描述在使用JS控制动画时一般需要在动画结束后执行回调去进行DOM的相关操作,所以需要监听动画结束进行回调.JS提供了以下事件用于监听动画的结束,简单总结学习下. CSS3动画监听事件 transitionEnd事件 transitionEnd事件会在CSS transition动画结束后触发. 动画结束后触发监听事件 <!DOCTYPE html> <html> <head> <title>transtionend demo</title>

myslide 插件开发知识点总结和 css3 动画性能问题的研究

myslide 插件开发知识点总结和 css3 动画性能问题的研究这篇文章主要是总结最近开发过程中遇到的问题.有几个问题又是不容易发现原因的问题,但是最后的结果又是很简单的. 1.手机端的 slider 插件是否有必要集成点按操作对于我自己开发的版本来说还是集成了这个操作的.但是参考了京东,天猫,淘宝电商网站首页的 slider 图片轮播插件都没有支持点按操作.那么是为什么呢? 我想到的答案可能如下: 对于移动端来说,屏幕太小,轮播图上的显示当前图片状态的圆点,人的手指不容易选中. 2.th

链家H5项目总结

在此次项目中,使用的是高度百分比.对于适配这一块确实少了很多. 1.如果是用高度百分比的话.则img需要写成这样的样式. img{ width:auto; height:100%; display: block; } 如果需要居中的话,可以对外层的div设置一个类名class:比如是setwidth,然后通过js去获取第一张图片的宽度赋给这个外层的div. setWidth:function(){ $(".setWidth").each(function(index,element){

jquery和zepto的扩展方法extend

jquery和zepto的扩展方法extend 总结下jQuery(3.1.1)和zepto(1.1.6)到底是如何来开放接口,使之可以进行扩展,两者都会有类型判断,本文使用简单的类型判断,暂不考虑兼容. 类型判断 var class2type = {},toString = class2type.toString,$={}; //判断类型 function type(obj) { return obj == null ? String(obj) : class2type[toString.ca

zTouch-移动端触屏开发利器(zepto touch扩展)

* Zepto.js v1.0.1 touch extend (Zepto.js v1.0.1 的swipe touch扩展)js-处理手机移动端web触屏手势动作. Zepto.js v1.0.1版本的touch.js模块引入使用后会导致页面很卡的情况,所以开发了一个新的扩展插件来替换其touch.js.已经过Android/ios测试. github* zTouch特点: zTouch.js只包含核心功能函数,不包含任何效果,简洁轻巧; 提供丰富的回调参数,可由用户自定义扩展效果(可参

zepto 扩展animate

热门专题