只需单击一次按钮，jquery即可自动淡入/淡出文本

Question

html:

<span class="js-btn btn">Click me</span>
<div class='js-fade is-hidden'>You look amazing!</div>

css：

.is-hidden {
  display: none;
}
.btn {
  background: #ccc;
  border-radius: 3px;
  display: inline-block;
  padding: 5px;
}
body {
  padding: 40px;
}

js:

// fade out
function fadeOut(el){
  el.style.opacity = 1;
  (function fade() {
    if ((el.style.opacity -= .1) < 0) {
      el.style.display = 'none';
      el.classList.add('is-hidden');
    } else {
      requestAnimationFrame(fade);
    }
  })();
}
// fade in
function fadeIn(el, display){
  if (el.classList.contains('is-hidden')){
    el.classList.remove('is-hidden');
  }
  el.style.opacity = 0;
  el.style.display = display || "block";
  (function fade() {
    var val = parseFloat(el.style.opacity);
    if (!((val += .1) > 1)) {
      el.style.opacity = val;
      requestAnimationFrame(fade);
    }
  })();
}
var btn = document.querySelector('.js-btn');
var el = document.querySelector('.js-fade');
btn.addEventListener('click', function(e){
  if(el.classList.contains('is-hidden')){
    fadeIn(el);
  }
  else {
    fadeOut(el);
  }
});

我需要当我点击按钮，它显示"你们看起来很神奇"。并且它将在5秒后被隐藏。这是我的jsfiddle：https://jsfiddle.net/5cvsm1a2/

我可以知道怎么做吗？提前谢谢。

Answer 1

您可以像一样使用setTimeout（）

var timer;
btn.addEventListener('click', function (e) {
    clearTimeout(timer);
    if (el.classList.contains('is-hidden')) {
        fadeIn(el);
        timer = setTimeout(function () {
            fadeOut(el);
        },5000)
    } else {
        fadeOut(el);
    }
});

// fade out
function fadeOut(el) {
  el.style.opacity = 1;
  (function fade() {
    if ((el.style.opacity -= .1) < 0) {
      el.style.display = 'none';
      el.classList.add('is-hidden');
    } else {
      requestAnimationFrame(fade);
    }
  })();
}
// fade in
function fadeIn(el, display) {
  if (el.classList.contains('is-hidden')) {
    el.classList.remove('is-hidden');
  }
  el.style.opacity = 0;
  el.style.display = display || "block";
  (function fade() {
    var val = parseFloat(el.style.opacity);
    if (!((val += .1) > 1)) {
      el.style.opacity = val;
      requestAnimationFrame(fade);
    }
  })();
}
var btn = document.querySelector('.js-btn');
var el = document.querySelector('.js-fade');
var timer;
btn.addEventListener('click', function(e) {
  clearTimeout(timer);
  if (el.classList.contains('is-hidden')) {
    fadeIn(el);
    timer = setTimeout(function() {
      fadeOut(el);
    }, 5000)
  } else {
    fadeOut(el);
  }
});

.is-hidden {
  display: none;
}
.btn {
  background: #ccc;
  border-radius: 3px;
  display: inline-block;
  padding: 5px;
}
body {
  padding: 40px;
}

<span class="js-btn btn">Click me</span>
<div class='js-fade is-hidden'>You look amazing!</div>

Answer 2

我看到您的代码只包含js，但当您询问jquery解决方案（这更简单）时，您有一些：

$('.js-btn').on('click', function() {
  $('.js-fade').fadeIn().delay(5000).fadeOut();
});