用js模拟JQuery的show与hide动画函数代码

下面是用JavaScript模拟jQuery的show和hide的完整攻略，步骤如下：

1. 获取元素并设置样式

首先，我们需要获取到要显示或隐藏的元素，并设置样式。我们可以使用document.querySelector或document.querySelectorAll获取元素，设置元素的display属性来控制元素的显示或隐藏。

const element = document.querySelector(".element-class");
element.style.display = "none"; // 初始状态为隐藏

2. 创建动画效果

接下来，我们需要创建动画效果。最简单的方法是使用setInterval方法，逐步改变元素的透明度或高度属性。我们可以定义一个animate函数，用于控制元素的变化。

function animate({timing, draw, duration}) {
  let start = performance.now();

  requestAnimationFrame(function animate(time) {
    // 获取动画执行时间
    let timeFraction = (time - start) / duration;
    if (timeFraction > 1) timeFraction = 1;

    // 调用绘制函数
    let progress = timing(timeFraction);
    draw(progress);

    // 终止动画函数
    if (timeFraction < 1) {
      requestAnimationFrame(animate);
    }
  });
}

在上面的代码中，animate函数可以接受三个参数：

1. timing：动画的时间函数，用来计算动画执行的进度；
2. draw：绘制函数，用来实现元素的变化效果；
3. duration：动画执行的总时间。

requestAnimationFrame方法用来循环执行animate函数，并在动画执行完成后终止动画效果。

3. 显示动画

现在，我们可以使用上面定义的animate函数来创建显示元素的动画。具体步骤如下：

1. 将元素的样式设置为display: block。
2. 获取元素的初始高度，设置元素的高度为0。
3. 调用animate函数，逐步增加元素的高度，直到达到初始高度为止。

下面是示例代码：

function show(element, duration) {
  element.style.display = "block";
  let height = element.offsetHeight;
  element.style.height = 0;

  animate({
    duration: duration || 400,
    timing: function(timeFraction) {
      return timeFraction;
    },
    draw: function(progress) {
      element.style.height = progress * height + "px";
    }
  });
}

上面的代码中，show函数接受两个参数：

1. element：要显示的元素；
2. duration：动画执行的总时间（可选，默认为400毫秒）。

在show函数中，我们先将元素的样式设置为display: block，通过element.offsetHeight获取元素的高度。然后将元素的高度设置为0，并调用animate函数，在动画执行过程中逐步增加元素的高度，直到达到初始高度为止。

4. 隐藏动画

类似地，我们可以使用animate函数来创建隐藏元素的动画。具体步骤如下：

1. 获取元素的初始高度。
2. 调用animate函数，逐步减小元素的高度，直到高度为0。
3. 将元素的样式设置为display: none。

下面是示例代码：

function hide(element, duration) {
  let height = element.offsetHeight;

  animate({
    duration: duration || 400,
    timing: function(timeFraction) {
      return 1 - timeFraction;
    },
    draw: function(progress) {
      element.style.height = progress * height + "px";
    }
  });

  setTimeout(function() {
    element.style.display = "none";
  }, duration || 400);
}

上面的代码中，hide函数接受两个参数：

1. element：要隐藏的元素；
2. duration：动画执行的总时间（可选，默认为400毫秒）。

在hide函数中，我们先使用element.offsetHeight获取元素的高度。然后调用animate函数，逐步减小元素的高度，直到高度为0。最后，我们通过setTimeout方法将元素的样式设置为display: none。

5. 使用示例

下面是一个使用示例，用于展示如何在页面中创建一个简单的显示和隐藏动画。

<button onclick="showBox()">显示</button>
<button onclick="hideBox()">隐藏</button>
<div class="box" style="display: none;">这是一个盒子。</div>

function showBox() {
  const box = document.querySelector(".box");
  show(box, 300);
}

function hideBox() {
  const box = document.querySelector(".box");
  hide(box, 300);
}

上面的代码中，当用户点击“显示”按钮时，调用showBox函数来显示box元素。当用户点击“隐藏”按钮时，调用hideBox函数来隐藏box元素。在showBox和hideBox函数中，我们分别调用show和hide函数来控制元素的显示和隐藏动画效果。