zepto不支持slideup()和slidedown();使用以下方法可以支持该功能

<div class="slide">
<p>
zepto不支持slideup()和slidedown();使用以下方法可以支持该功能
</p>
</div> <button class="slide-trigger">点我</button>

js代码如下

(function ($) {
$.fn.slideDown = function (duration) {
// get old position to restore it then
var position = this.css('position'); // show element if it is hidden (it is needed if display is none)
this.show(); // place it so it displays as usually but hidden
this.css({
position: 'absolute',
visibility: 'hidden'
}); // get naturally height
var height = this.height(); // set initial css for animation
this.css({
position: position,
visibility: 'visible',
overflow: 'hidden',
height: 0
}); // animate to gotten height
this.animate({
height: height
}, duration);
};
})(Zepto); $(function () {
$('.slide-trigger').on('click', function () {
$('.slide').slideDown(2000);
});
});

演示地址:http://jsfiddle.net/6zkSX/5/

原文地址:http://www.dvy.com.cn/2015/11/25/1612.html

让zepto支持slideup(),slidedown()的更多相关文章

  1. jq slideUp slideDown

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. 让zepto支持ie

    找到zepto源码:修改为如下代码: zepto.Z = function(dom, selector) { dom = dom || [] // 支持ie10,主要是支持wp8 if(window. ...

  3. 让zepto支持requirejs的方法

    window.Zepto = Zepto '$' in window || (window.$ = Zepto) if ( typeof define === "function" ...

  4. 关于slideup和slidedown 鼠标多次滑过累积的动画效果

    stop() 方法停止当前正在运行的动画 包括animation动画和slideup/slidedown动画 例如:鼠标经过一个元素时,执行一个slide动画,多次快速经过,不处理的话这个元素会保留累 ...

  5. 微信小程序之实现slideUp和slideDown效果和点击空白隐藏

    怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY()属性,给需要动画的元素添加上一个动画class. 先上效果图: ...

  6. zepto.js介绍

    是一个阉割版的jQuery zepto不支持jQuery过于复杂的选择器,比如:first :last :eq zepto如果要用动画必须再次引包 zepto能将css3中transition支持的动 ...

  7. Zepto源码分析(一)核心代码分析

    本文只分析核心的部分代码,并且在这部分代码有删减,但是不影响代码的正常运行. 目录 * 用闭包封装Zepto * 开始处理细节 * 正式处理数据(获取选择器选择的DOM) * 正式处理数据(添加DOM ...

  8. JQuery快速入门

    Write less, do more, I like jQuery. jQuery是最常用的js库,整体来说非常轻量并易于扩展,对于移动应用可以使用其更轻量的孪生兄弟Zepto代替.其是由John ...

  9. 使用veloticy-ui生成文字动画

    前言 最近要实现一个类似文字波浪线的效果,使用了velocity-ui这个动画库,第一个感觉就是使用简单,代码量少,性能优异,在此简单介绍一下使用方法,并实现一个看上去不错的动画.具体使用方法可以点击 ...

随机推荐

  1. ProxySQL 配置详解及读写分离(+GTID)等功能说明 (完整篇)

    ProxySQL是灵活强大的MySQL代理层, 是一个能实实在在用在生产环境的MySQL中间件,可以实现读写分离,支持 Query 路由功能,支持动态指定某个 SQL 进行 cache,支持动态加载配 ...

  2. postman传递对象到spring controller的方式

    1.spring Controller @RestController @RequestMapping(value = "/basic/task") public class Ta ...

  3. KM算法及其应用

    在二分图匹配中有最大匹配问题,使用匈牙利算法或者网络流相关算法解决,如果给每条边增加一个权值,求权值和最大的匹配方案就叫做最大权匹配问题.其实之前所说的最大匹配就是权值为1的最大权匹配. 求最大权完备 ...

  4. SPI Flash(W25Q16DV) 基本操作

    读取厂家\设备 ID 发送 90H 指令,再发送 00h 的地址,然后接收即可. 代码如下: void SPIFlashReadID(int *pMID, int *pDID) { SPIFlash_ ...

  5. c#中打开Excel文档

    方法一:(调用Excel的COM组件)       在项目中打开Add Reference对话框,选择COM栏,之后在COM列表中找到"Microsoft Excel 11.0 Object ...

  6. MyBatis(国税)

    一.MyBatis概要 1.1.ORM介绍 对象关系映射(Object Relational Mapping,简称ORM,或O/RM,或O/R mapping),用于实现面向对象编程语言里不同类型系统 ...

  7. swiper下滑分页,减少swiper-slide项的时候会出现空白

    修改子项后,先重置当前的页,调用 swiper.slideTo(0); 滚动到初始位置 再调用 swiper.update(); 更新一系列设置就可以了.

  8. [译]WebAPI下的如何实现参数绑定

    本文将概述在WebAPI方式下将如何将参数绑定到一个action方法,包括参数是如何被读取,一系列规则决定特定环境采用的那种绑定方式,文章最后将给出一些实际的例子. Parameter binding ...

  9. 菜鸟入门【ASP.NET Core】4:在CentOS上安装.NET Core运行时、部署到CentOS

    下载.NET Core SDK 下载地址:https://www.microsoft.com/net/download/windows 第一步:Add the dotnet product feed( ...

  10. GridView控件的属性、事件

    GridView控件的属性 属性 描述 AllowPaging 指示该控件是否支持分页. AllowSorting 指示该控件是否支持排序. AutoGenerateColumns 指示是否自动地为数 ...