Javascript jquery fadein/fadeout文本只需单击一次按钮即可自动显示

html:

js:

//淡出
功能衰减（el）{
el.style.opacity=1；
（函数fade（）{
如果（（el.style.opacity-=.1）<0）{
el.style.display='none'；
el.classList.add（'is-hidden'）；
}否则{
请求动画帧（淡入淡出）；
}
})();
}
//淡入
功能fadeIn（el，显示器）{
if（el.classList.contains（'is-hidden'））{
el.classList.remove（'is-hidden'）；
}
el.style.opacity=0；
el.style.display=显示| |“块”；
（函数fade（）{
var val=parseFloat（el.style.opacity）；
如果（！（（val+=0.1）>1））{
el.style.opacity=val；
请求动画帧（淡入淡出）；
}
})();
}
var btn=document.querySelector（'.js btn'）；
var el=document.querySelector（'.js fade'）；
btn.addEventListener（'click'，函数（e）{
if（el.classList.contains（'is-hidden'））{
法代因（el）；
}
否则{
衰减（el）；
}
});

我需要当我点击按钮时，它会显示“你看起来棒极了”。它将在5秒后隐藏。这是我的JSFIDLE：

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

您可以使用like

//淡出
功能衰减（el）{
el.style.opacity=1；
（函数fade（）{
如果（（el.style.opacity-=.1）<0）{
el.style.display='none'；
el.classList.add（'is-hidden'）；
}否则{
请求动画帧（淡入淡出）；
}
})();
}
//淡入
功能fadeIn（el，显示器）{
if（el.classList.contains（'is-hidden'））{
el.classList.remove（'is-hidden'）；
}
el.style.opacity=0；
el.style.display=显示| |“块”；
（函数fade（）{
var val=parseFloat（el.style.opacity）；
如果（！（（val+=0.1）>1））{
el.style.opacity=val；
请求动画帧（淡入淡出）；
}
})();
}
var btn=document.querySelector（'.js btn'）；
var el=document.querySelector（'.js fade'）；
无功定时器；
btn.addEventListener（'click'，函数（e）{
清除超时（计时器）；
if（el.classList.contains（'is-hidden'））{
法代因（el）；
计时器=设置超时（函数（）{
衰减（el）；
}, 5000)
}否则{
衰减（el）；
}
});
。是隐藏的{
显示：无；
}
.btn{
背景：#ccc；
边界半径：3px；
显示：内联块；
填充物：5px；
}
身体{
填充：40px；
}
点击我
你看起来棒极了我看到您的代码只包含js，但当您询问jquery解决方案时（这是一种更简单的解决方案），这里有一些：

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);
    }
});

您正在使用jQuery吗？如果没有，请移除标签
.is-hidden {
  display: none;
}

.btn {
  background: #ccc;
  border-radius: 3px;
  display: inline-block;
  padding: 5px;
}

body {
  padding: 40px;
}

// 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);
  }
});

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);
    }
});

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