export default {
  toggle: function(o, height, times) {
    if (!o.tid) o.tid = "_" + Math.random() * 100;
    if (!window.toggler) window.toggler = {};
    if (!window.toggler[o.tid]) {
      window.toggler[o.tid] = {
        obj: o,
        maxHeight: o.offsetHeight,
        minHeight: height, //高度
        timer: null,
        action: 1
      };
    }
    o.style.height = o.offsetHeight + "px";
    if (window.toggler[o.tid].timer) clearTimeout(window.toggler[o.tid].timer);
    window.toggler[o.tid].action *= -1;
    window.toggler[o.tid].timer = setTimeout(() => {
      this.anim(o.tid, times);
    }, times); //循环时间
  },
  anim: function(id, times) {
    var t = window.toggler[id];
    var o = window.toggler[id].obj;
    if (t.action < 0) {
      if (o.offsetHeight <= t.minHeight) {
        clearTimeout(t.timer);
        return;
      }
    } else {
      if (o.offsetHeight >= t.maxHeight) {
        clearTimeout(t.timer);
        return;
      }
    }
    o.style.height = parseInt(o.style.height, 10) + t.action * 8 + "px"; //8是每次变化的量
    window.toggler[id].timer = setTimeout(() => {
      this.anim(id, times);
    }, times); //循环时间
  }
};

调用方法

 Slideutlis.toggle(
        document.getElementsByClassName("className")[0].parentNode,43,10//element,height,speed
      );

 

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐