欢迎光临
我们一直在努力

让zepto支持slideup(),slidedown()

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/

赞(0)
版权归原作者所有,如有侵权请告知。达维营-前端网 » 让zepto支持slideup(),slidedown()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址