用纯JavaScript替代jQuery之特效篇

        接上篇：用纯JavaScript替代jQuery之AJAX篇

>>>>淡入淡出

jQuery

$(el).fadeIn();

谷歌浏览器，火狐浏览器，IE8+

function fadeIn(el) {
  var opacity = 0;

  el.style.opacity = 0;
  el.style.filter = '';

  var last = +new Date();
  var tick = function() {
    opacity += (new Date() - last) / 400;
    el.style.opacity = opacity;
    el.style.filter = 'alpha(opacity=' + (100 * opacity)|0 + ')';

    last = +new Date();

    if (opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };

  tick();
}

fadeIn(el);

谷歌浏览器，火狐浏览器，IE9+

function fadeIn(el) {
  el.style.opacity = 0;

  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
    last = +new Date();

    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
    }
  };

  tick();
}

fadeIn(el);

谷歌浏览器，火狐浏览器，IE10+

el.classList.add('show');
el.classList.remove('hide');

.show {
  transition: opacity 400ms;
}
.hide {
  opacity: 0;
}

>>>>Hide

jQuery

$(el).hide();

谷歌浏览器，火狐浏览器，IE8+

el.style.display = 'none';

>>>>Show

jQuery

$(el).show();

谷歌浏览器，火狐浏览器，IE8+

el.style.display = '';