我正在为我的移动网站使用zepto库.我最近才知道zepto没有像
jquery一样的slideDown()插件.我想为zepto执行相同的操作.
我在jsfiddle(http://jsfiddle.net/goje87/keHMp/1/)上尝试过一个.这里不显示元素的动画.它只是闪烁下来如何引入动画?
PS:我不能提供一个固定的高度,因为我将这个插件应用到高度属性不知道的元素.
感谢在advace!
解决方法
演示:
http://jsfiddle.net/6zkSX/5
JavaScript的:
(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);
});
});