自己动手丰衣足食，为Zepto添加Slide动画效果
来源：博客园
公司的移动端项目，采用zepto为主要框架，但是zepto毕竟是精简版的jquery，体积小了，功能自然没有这么强大，特别是动画和选择器这两块，需要我们自己去拓展。
在项目开发过程中，很多页面过渡需要用到动画，简单的show/hide过渡太生硬，对用户不友好，并且移动端大多都是采用slide效果，此文主要是为zepto拓展slide动画。 二.发现
从zepto的在线文档上可以发现一个发布在github上的，但是缺少slide效果，度娘上找了找，相关的极少，只发现了一个，所以我们就照着这个例子写了几个常用的slide动画。 三.行动
首先，我们把动画方向分为上下滑动和左右滑动，滑动形式分为元素自身的伸缩和相对位移
1.左右slide
这应该是最常用的一个效果
贴上代码：注释部分二选一， slideLeft 和 slideRight 的滑动形式必须设为一致，不然无法工作 $.fn.slideLeft = function (speed, callback) {
//获取元素position
var position = this.css('position');
this.show().css({
position: 'absolute',
visibility: 'hidden'
//获取元素宽度
var width = this.width();
//-------通过伸缩元素宽度实现动画-------
//return this.css({
position: position,
visibility: 'visible',
overflow: 'auto'
//}).animate({ width: 0 }, speed, null, callback);
//-------通过移动元素相对位置实现动画-------
return this.css({
position: position,
visibility: 'visible',
overflow: 'auto'
}).animate({ left: -width }, speed, null, callback);
$.fn.slideRight = function (speed, callback) {
//获取元素position
var position = this.css('position');
this.show().css({
position: 'absolute',
visibility: 'hidden'
//获取元素宽度
var width = this.width() === 0 ? $(window).width() : this.width();
//-------通过伸缩元素宽度实现动画-------
//return this.css({
position: position,
visibility: 'visible',
overflow: 'auto'
//}).animate({ width: width }, speed, null, callback);
//-------通过移动元素相对位置实现动画-------
return this.css({
left: -width,
position: position,
visibility: 'visible',
overflow: 'auto',
}).animate({ left: 0 }, speed, null, callback);
};View Code
左右位移效果图：
左右伸缩效果图：
2.上下slide
贴上代码：注释部分二选一， slideUp 和 slideDown 的滑动形式必须设为一致，不然无法工作
$.fn.slideDown = function (speed, callback) {
//获取元素position
var position = this.css('position');
this.show().css({
position: 'absolute',
visibility: 'hidden'
//获取元素高度
var height = this.height() === 0 ? $(window).height() : this.height();
//-------通过伸缩元素高度实现动画-------
//return this.css({
position: position,
visibility: 'visible',
overflow: 'auto',
//}).animate({ height: height }, speed, null, callback);
//-------通过移动元素相对位置实现动画-------
return this.css({
top: -height,
position: position,
visibility: 'visible',
overflow: 'auto'
}).animate({ top: 0 }, speed, null, callback);
$.fn.slideUp = function (speed, callback) {
//获取元素position
var position = this.css('position');
this.show().css({
position: 'absolute',
visibility: 'auto'
//获取元素高度
var height = this.height();
//-------通过伸缩元素高度实现动画-------
//return this.css({
position: position,
visibility: 'visible',
overflow: 'hidden',
height: height
//}).animate({ height: 0 }, speed, null, callback);
//-------通过移动元素相对位置实现动画-------
return this.css({
position: position,
visibility: 'visible',
overflow: 'auto'
}).animate({ top: -height }, speed, null, callback);
};View Code
上下位移效果图：
上下伸缩效果图：
这样，我们在项目中就能愉快的使用动画了。
顺便附上整个动画模块，但在这之前必须先添加上animate模块，因为zepto本身是不具有animate事件的，许多模块都是单独分出去的，可以参考，代码我们可以从github中的复制进去。
//animate模块 (function ($, undefined) {
var prefix = '', eventPrefix,
vendors = { Webkit: 'webkit', Moz: '', O: 'o' },
testEl = document.createElement('div'),
supportedTransforms = /^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i,
transform,
transitionProperty, transitionDuration, transitionTiming, transitionDelay,
animationName, animationDuration, animationTiming, animationDelay,
cssReset = {}
function dasherize(str) { return str.replace(/([A-Z])/g, '-$1').toLowerCase() }
function normalizeEvent(name) { return eventPrefix ? eventPrefix + name : name.toLowerCase() }
if (testEl.style.transform === undefined) $.each(vendors, function (vendor, event) {
if (testEl.style[vendor + 'TransitionProperty'] !== undefined) {
prefix = '-' + vendor.toLowerCase() + '-'
eventPrefix = event
return false
transform = prefix + 'transform'
cssReset[transitionProperty = prefix + 'transition-property'] =
cssReset[transitionDuration = prefix + 'transition-duration'] =
cssReset[transitionDelay = prefix + 'transition-delay'] =
cssReset[transitionTiming = prefix + 'transition-timing-function'] =
cssReset[animationName = prefix + 'animation-name'] =
cssReset[animationDuration = prefix + 'animation-duration'] =
cssReset[animationDelay = prefix + 'animation-delay'] =
cssReset[animationTiming = prefix + 'animation-timing-function'] = ''
off: (eventPrefix === undefined && testEl.style.transitionProperty === undefined),
speeds: { _default: 400, fast: 200, slow: 600 },
cssPrefix: prefix,
transitionEnd: normalizeEvent('TransitionEnd'),
animationEnd: normalizeEvent('AnimationEnd')
$.fn.animate = function (properties, duration, ease, callback, delay) {
if ($.isFunction(duration))
callback = duration, ease = undefined, duration = undefined
if ($.isFunction(ease))
callback = ease, ease = undefined
if ($.isPlainObject(duration))
ease = duration.easing, callback = plete, delay = duration.delay, duration = duration.duration
if (duration) duration = (typeof duration == 'number' ? duration :
($.fx.speeds[duration] || $.fx.speeds._default)) / 1000
if (delay) delay = parseFloat(delay) / 1000
return this.anim(properties, duration, ease, callback, delay)
$.fn.anim = function (properties, duration, ease, callback, delay) {
var key, cssValues = {}, cssProperties, transforms = '',
that = this, wrappedCallback, endEvent = $.fx.transitionEnd,
fired = false
if (duration === undefined) duration = $.fx.speeds._default / 1000
if (delay === undefined) delay = 0
if ($.fx.off) duration = 0
if (typeof properties == 'string') {
// keyframe animation
cssValues[animationName] = properties
cssValues[animationDuration] = duration + 's'
cssValues[animationDelay] = delay + 's'
cssValues[animationTiming] = (ease || 'linear')
endEvent = $.fx.animationEnd
cssProperties = []
// CSS transitions
for (key in properties)
if (supportedTransforms.test(key)) transforms += key + '(' + properties[key] + ') '
else cssValues[key] = properties[key], cssProperties.push(dasherize(key))
if (transforms) cssValues[transform] = transforms, cssProperties.push(transform)
if (duration & 0 && typeof properties === 'object') {
cssValues[transitionProperty] = cssProperties.join(', ')
cssValues[transitionDuration] = duration + 's'
cssValues[transitionDelay] = delay + 's'
cssValues[transitionTiming] = (ease || 'linear')
wrappedCallback = function (event) {
if (typeof event !== 'undefined') {
if (event.target !== event.currentTarget) return // makes sure the event didn't bubble from "below"
$(event.target).unbind(endEvent, wrappedCallback)
$(this).unbind(endEvent, wrappedCallback) // triggered by setTimeout
fired = true
$(this).css(cssReset)
callback && callback.call(this)
if (duration & 0) {
this.bind(endEvent, wrappedCallback)
// transitionEnd is not always firing on older Android phones
// so make sure it gets fired
setTimeout(function () {
if (fired) return
wrappedCallback.call(that)
}, ((duration + delay) * 1000) + 25)
// trigger page reflow so new elements can animate
this.size() && this.get(0).clientLeft
this.css(cssValues)
if (duration &= 0) setTimeout(function () {
that.each(function () { wrappedCallback.call(this) })
return this
testEl = null
//动画效果模块 (function ($, undefined) {
var document = window.document, docElem = document.documentElement,
origShow = $.fn.show, origHide = $.fn.hide, origToggle = $.fn.toggle
function anim(el, speed, opacity, scale, callback) {
if (typeof speed == 'function' && !callback) callback = speed, speed = undefined
var props = { opacity: opacity }
if (scale) {
props.scale = scale
el.css($.fx.cssPrefix + 'transform-origin', '0 0')
return el.animate(props, speed, null, callback);
function hide(el, speed, scale, callback) {
return anim(el, speed, 0, scale, function () {
origHide.call($(this))
callback && callback.call(this)
$.fn.show = function (speed, callback) {
origShow.call(this)
//不是很理解作者的想法，如果这里继续执行下去，所有调用zepto原生show事件的元素，都会被这个事件覆盖，并且透明度都为被设为1...
if (speed === undefined) return origShow.call(this) // 原版为：if (speed === undefined) speed = 0
else this.css('opacity', 0)
return anim(this, speed, 1, '1,1', callback)
$.fn.hide = function (speed, callback) {
if (speed === undefined) return origHide.call(this)
else return hide(this, speed, '0,0', callback)
$.fn.toggle = function (speed, callback) {
if (speed === undefined || typeof speed == 'boolean')
return origToggle.call(this, speed)
else return this.each(function () {
var el = $(this)
el[el.css('display') == 'none' ? 'show' : 'hide'](speed, callback)
$.fn.fadeTo = function (speed, opacity, callback) {
return anim(this, speed, opacity, null, callback)
$.fn.fadeIn = function (speed, callback) {
var target = this.css('opacity')
if (target & 0) this.css('opacity', 0)
else target = 1
return origShow.call(this).fadeTo(speed, target, callback)
$.fn.fadeOut = function (speed, callback) {
return hide(this, speed, null, callback)
$.fn.fadeToggle = function (speed, callback) {
return this.each(function () {
var el = $(this)
(el.css('opacity') == 0 || el.css('display') == 'none') ? 'fadeIn' : 'fadeOut'
](speed, callback)
$.fn.slideDown = function (speed, callback) {
//获取元素position
var position = this.css('position');
this.show().css({
position: 'absolute',
visibility: 'hidden'
//获取元素高度
var height = this.height() === 0 ? $(window).height() : this.height();
//-------通过伸缩元素高度实现动画-------
//return this.css({
position: position,
visibility: 'visible',
overflow: 'auto',
//}).animate({ height: height }, speed, null, callback);
//-------通过移动元素相对位置实现动画-------
return this.css({
top: -height,
position: position,
visibility: 'visible',
overflow: 'auto'
}).animate({ top: 0 }, speed, null, callback);
$.fn.slideUp = function (speed, callback) {
//获取元素position
var position = this.css('position');
this.show().css({
position: 'absolute',
visibility: 'auto'
//获取元素高度
var height = this.height();
//-------通过伸缩元素高度实现动画-------
//return this.css({
position: position,
visibility: 'visible',
overflow: 'hidden',
height: height
//}).animate({ height: 0 }, speed, null, callback);
//-------通过移动元素相对位置实现动画-------
return this.css({
position: position,
visibility: 'visible',
overflow: 'auto'
}).animate({ top: -height }, speed, null, callback);
$.fn.slideLeft = function (speed, callback) {
//获取元素position
var position = this.css('position');
this.show().css({
position: 'absolute',
visibility: 'hidden'
//获取元素宽度
var width = this.width();
//-------通过伸缩元素宽度实现动画-------
//return this.css({
position: position,
visibility: 'visible',
overflow: 'auto'
//}).animate({ width: 0 }, speed, null, callback);
//-------通过移动元素相对位置实现动画-------
return this.css({
position: position,
visibility: 'visible',
overflow: 'auto'
}).animate({ left: -width }, speed, null, callback);
$.fn.slideRight = function (speed, callback) {
//获取元素position
var position = this.css('position');
this.show().css({
position: 'absolute',
visibility: 'hidden'
//获取元素宽度
var width = this.width() === 0 ? $(window).width() : this.width();
//-------通过伸缩元素宽度实现动画-------
//return this.css({
position: position,
visibility: 'visible',
overflow: 'auto'
//}).animate({ width: width }, speed, null, callback);
//-------通过移动元素相对位置实现动画-------
return this.css({
left: -width,
position: position,
visibility: 'visible',
overflow: 'auto',
}).animate({ left: 0 }, speed, null, callback);
})(Zepto)View Code
免责声明：本站部分内容、图片、文字、视频等来自于互联网，仅供大家学习与交流。相关内容如涉嫌侵犯您的知识产权或其他合法权益，请向本站发送有效通知，我们会及时处理。反馈邮箱&&&&。
学生服务号
在线咨询，奖学金返现，名师点评，等你来互动zepto中animate的用法 - CSDN博客
zepto中animate的用法
$(&#some_element&).animate({
opacity: 0.25, left: '50px',
color: '#abcdef',
rotateZ: '45deg', translate3d: '0,10px,0'
}, 500, 'ease-out')&pre name=&code& class=&html&&
$this_bd.animate({height:iTthis_bd_h+'px',complete:siblingsUp()},700);
function siblingsUp(){
$this_bd.siblings('.bd').animate({height:'0px'},50);
会发现zepto的complete会先执行，在执行animate动画，所以 回调函数应该写在后面，如
$('.warter').animate({margin:'150px 0 0 -80px',opacity:'1',rotate:'-45deg'},800,'ease-in-out',function(){alert(1);});
/samwu/archive//3121649.html
/edokeh/xin-zhan-html5-hong-ping-ban-kai-fa-zong-jie
& & & & & &&
本文已收录于以下专栏：
相关文章推荐
zepto的animate()源码采用css3的方式进行，而scrollTop属性不在css3的动画属性中，所以没有生效
(function (global) {
$.fn.scrollTo =...
animate is not a function（zepto 使用报错）为什么使用zepto写animate报错？因为zepto默认构建包含: Core, Ajax, Event, Form, IE...
综合类综合类
前端知识体系
/sb/p/3894452.html
前端知识结构
/JacksonT...
获取html元素的几种方法:getElementById ，getElementsByName ，getElementsByTagName后两个是得到元素的集合，byid只是得到单个对象。举例:htt...
1. Zepto 对象 不能自定义事件
  例如执行： $({}).bind('cust', function(){});
 结果：  TypeError: Object has no method ...
showTypeList:function(){
$('#search-box').on('tap','.input-tab-txt',function(event){...
微信小应用，开发时长2天上线发出去，快速应用，因此用了zepto来方便JS的编写。
项目一：车标测试（点击答案时JS延迟500ms+css过渡背景的效果）;
项目二：宝宝测试(原生JS...
他的最新文章
讲师：吴岸城
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)Zepto的使用及一些问题小结
6592次浏览
我之前在，一文中，提及到Zepto。因为zepto体积小，在移动端开发应用还是蛮广泛的！有的公司手机端开发，jquery和zepto，都不用，直接用原生！我也写了一篇文章，关于 。但是呢，大部分人写起原生来，还是比较费劲的。除非我们提前封装好！话又说回来了，封装好了和用jquery和zepto性能其实也差不了多少。因此，尽管zepto不是很完善，遭到很多人的吐槽，但是还是有一定的使用范围的。今天就和大家聊聊zepto!
Zepto在PC端的应用
zepto 说白了，相比jquery，最大的优点就是小！！，因为小，所以节省资源！很多移动端开发就是看中了这一点！假如你在PC端也想用，那么要做IE9及一下版本的兼容问题。
首先需要我们写一个加载器，针对浏览器做一些兼容，假如浏览器不支持Zepto那我们就加载jquery。大致代码如下：
var fnJsLoad = function(url, callback) {
callback = callback || function() {};
var eleScript = document.createElement('script');
eleScript.onload = function() {
if (!eleScript.isInited) {
eleScript.isInited =
callback();
// 一般而言，低版本IE走这个
eleScript.onreadystatechange = function() {
if (!eleScript.isInited && /^loaded|complete$/.test(eleScript.readyState)) {
eleScript.isInited =
callback();
eleScript.src =
document.getElementsByTagName('head')[0].appendChild(eleScript);
// IE10+加载zepto.js
// IE7-IE9加载jQuery
var URLLIB = 'js/zepto.min.js';
if (!history.pushState) {
URLLIB = 'js/jquery-1.11.1.min.js';
fnJsLoad(URLLIB, function() {
// 业务脚本初始化
console.log(&haorooms&);
可以对上面代码做一下测试，看到IE低版本加载的是jquery，高版本及谷歌等现代浏览器加载的是zepto！
关于pushState，我之前写过：
Zepto使用的一些小问题
我在实际开发中，一些小的项目，还是用Zepto，一些大的项目，多人合作的，有时候还是会选择jquery。因为项目中可能引入一些第三方写的jquery插件，假如你这些插件不能很好的和zepto兼容，或者为了兼容要花大量时间成本，那么可以退而求其次，选择运用jquery!
下面我们就聊聊zepto的一些问题吧！
问题一：Zepto事件委托
首先我们点击下面的方框
事件a执行完毕会里面执行事件b
这是因为：
Zepto 的事件委托是，在代码解析的时候，所有document的所有 click 委托事件都依次放入一个队列里，click 的时候先看当前元素是不是.a，符合就执行，然后查看是不是.b，符合就执行。
因此，执行完了a之后，再看是不是b，因为修改了class，因此b又执行了一遍。
我们把上面代码换个顺序
var $doc = $(document)
$doc.on('click','.b',function(){
alert('b事件')
$doc.on('click','.a',function(){
alert('a事件')
$(this).removeClass('a')
.addClass('b')
大家再来试一下：
因为事件b在事件a之前，先执行了b,执行完了a之后就不会再执行b，这就达到我们想要的效果了！
问题二：对img标签空src属性用attr取值会取得当前url地址
例如如下代码：
&img src=&& class=&haorooms_img&&
alert($(&.haorooms_img&).attr(&src&));
会输出我当前浏览器的地址！
临时解决方案就是直接用js原生代码获取：
//谷歌浏览器，火狐浏览器，IE8+
el.getAttribute('tabindex');
假如不好选择元素，那么我们直接封装一个方法：
function getAttr(ele, attr) {
var e = ele.get(0);
var attrs = e.
if (attrs == undefined) {
return &&;
} else if (attrs[attr] == undefined) {
return &&;
return attrs[attr].
问题三：判断当前对象是否是Zepto实例化对象的方法
在jquery中，判断是不是jquery实例化对象，直接用instanceof就行，即：
var a=$(&body&);
if(a instanceof jQuery){
在zepto中这样用是无效的，一般zepto是如下来判断的即：
var a=$(&body&);
if(Zepto.zepto.isZ(a)){
问题四：jquery的一些方法缺失。
例如jquery的nextAll(),prevAll()等等方法，zepto中都没有实现！
问题五：Zepto 对象 不能自定义事件
例如执行：
$({}).bind('haorooms', function(){});
TypeError: Object has no method 'addEventListener'
解决办法是创建一个脱离文档流的节点作为事件对象：
$('').bind('haorooms', function(){});
问题六：Zepto 的选择器表达式: [name=value]
中value 必须用 双引号 &
or 单引号 ' 括起来
例如执行：
$('[data-userid=haorooms]')
结果：Error: SyntaxError: DOM Exception 12
解决办法：
$('[data-userid=&haorooms]&') or $(&[data-userid='haorooms']&)
### 问题七：zepto获取select元素的选中option不能用类似jq的方法$('option[selected]'),因为selected属性不是css的标准属性
$('option').not(function(){ return !this.selected })
比如jquery:
$(this).find('option[selected]').attr('data-v') * 1
$(this).find('option').not(function() {return !this.selected}).attr('data-v') * 1
问题七：zepto获取select元素的选中option，可以用$('option[selected]'),但是不能用$('option:selected')
在魔法哥的提醒下，又测试了一下，发现jquery可以用$('option:selected') 获取选中的选项，但是zepto会报错！
会报如下错误：
Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': 'option:selected' is not a valid selector.
但是获取有select中含有disabled属性的元素可以用 $(this).find(&option:not(:disabled)&) 因为disabled是标准属性
另外：zepto在操作dom的selected和checked属性时尽量使用prop方法
问题八：Zepto 是根据标准浏览器写的，所以对于节点尺寸的方法只提供 width() 和 height()，省去了 innerWidth(), innerHeight(),outerWidth(),outerHeight()
例如，边框三角形宽高的获取，假如css代码如下：
&div class=&haorooms&&&/div&
.haorooms{
height: 0;
border-width: 0 20px 20
border-color: transpar
border-style:
jQuery 使用 .width() 和 .css('width') 都返回 0，高度也一样；
Zepto 使用 .width() 返回 40，高度是20，使用 .css('width') 返回 0px 。
所以，这种场景，jQuery 使用 .outerWidth() / .outerHeight() ；Zepto 使用 .width() / .height() 。
问题九 ：offset()
Zepto.js: 返回 top 、 left 、 width 、 height
jQuery: 返回 width 、 height
问题十 ：隐藏元素
Zepto.js: 无法获取宽高；
jQuery: 可以获取。
问题十一：zepto的jsonp callback函数名无法自定义
问题十二：tap的点透事件
关于这个问题，我之前写过：
虽然zepto问题不少，假如我们在书写的时候能避免这些问题，在pc端和移动的应用场景还是蛮多的!今天就写到这里！
相关文章：
关键词搜索zepto做动画效果有什么好的解决方法没
zepto做动画效果有什么好的解决方法没
如题，移动端改用zepto了，有些效果不如jquery
为什么需要用zepto来做动画呢。
移动端的话直接用css3效率和效果大部分情况都比js好吧
推荐你使用这个css3的动画库
如果你需要类似于jquery中fadeIn之类的动画
直接在元素上添加对应的类名.
$("dom").addClass("fadeIn") 这样来做
建议动画还是用gsap的tweenMax吧，这个动画引擎性能非常强劲
可以用css transition动画，原理看这里：
当然你可以找一些现成的，例如：
添加你想要问的问题
PHP开发框架
开发工具/编程工具
服务器环境}