模仿jquery的fadeIn、fadeOut、fadeToogle、fadeTo函数，淡入淡出效果挺不错！

为了模拟jQuery的fadeIn, fadeOut, fadeToggle 和 fadeTo 函数，我们可以创建一个自定义的JavaScript函数，该函数使用CSS的opacity属性来实现淡入和淡出效果。

以下是实现这些功能的JavaScript函数：

function fadeIn(element, duration = 200) {
  fadeTo(element, duration, 1);
}
 
function fadeOut(element, duration = 200) {
  fadeTo(element, duration, 0);
}
 
function fadeToggle(element, duration = 200) {
  if (element.style.opacity <= 0) {
    fadeIn(element, duration);
  } else {
    fadeOut(element, duration);
  }
}
 
function fadeTo(element, duration, opacity) {
  let start = new Date().getTime();
  let interval = setInterval(() => {
    let now = new Date().getTime();
    let timePassed = now - start;
    let progress = timePassed / duration;
    if (progress >= 1) {
      clearInterval(interval);
      element.style.opacity = opacity;
    } else {
      element.style.opacity = progress + opacity * (1 - progress);
    }
  }, 10);
}

使用方法：

let element = document.getElementById('myElement');
 
fadeIn(element); // 淡入元素
fadeOut(element); // 淡出元素
fadeToggle(element); // 切换淡入/淡出状态
fadeTo(element, 500, 0.5); // 渐变到指定的透明度，持续时间500毫秒

请注意，这些函数使用了简单的时间间隔递归来平滑过渡元素的透明度。这不是最精确的实现方式，但足以演示基本的淡入淡出效果。