Question

我正在开发一个网站，我想在脚本代码中添加一个淡入淡出功能，但我不知道该怎么做。

这是我的代码：

<script>
  function showdiv() {
    document.getElementById("show").style.visibility = "visible";
  }
  setTimeout("showdiv()", 2000);
</script>
<div class="botao" id="show" style="visibility:hidden">
  <a href="logreg/login.php" class="btn">
    <span></span>
    <span></span>
    <span></span>
    <span></span> Começar
  </a>
</div>

Answer 1

就像伊恩·赛义德（Ian Said）一样，您不能为可见性设置动画，因为它不是增量的。

您需要知道的是CSS（过渡属性）。您可以在这里了解更多信息：https://www.w3schools.com/css/css3_transitions.asp

使用内联CSS并不是一个好习惯，您应该避免这样做，但是多数民众赞成在代码中为您解决问题：

function showdiv(){
  document.getElementById("show").style.opacity="1";
}
setTimeout("showdiv()", 2000);

<div class="botao" id="show" style="opacity:0; transition:opacity 750ms ease-in-out">
  <a href="logreg/login.php" class="btn">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    Começar
  </a>
</div>

Answer 2

您不能为visibility设置动画，因为它不是连续的属性-元素是visible或hidden。相反，您可以设置opacity的动画，以控制元素的透明度。您想要的是从opacity: 0（完全透明）到opacity: 1（完全不透明/可见）的平滑过渡。

实际上，您可以完全使用CSS来完成此操作-完全不需要JavaScript。这种方法的优点是CSS比JavaScript更快，并且通常更易于理解和维护。

首先在CSS中定义动画关键帧：

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

然后，您只需将该动画附加到您的元素上（同样在CSS中）：

#show {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-iteration-count: 1;
}

Answer 3

您可以简单地使用setInterval修改不透明度

function fade(object, delay)
{
    var i = setInterval(function(){
        if(object.style.opacity === 0 || object.style.opacity < 0)
        {
            clearInterval(i);
            object.style.display = "none";
        }
        else if(!object.style.opacity)
        {
            object.style.opacity = 1.0;
        }
        else
        {
            object.style.opacity -= 0.01;
        }
    }, delay);

}
fade(document.getElementById("a"), 10);

Answer 4

这是我对跨浏览器支持（包括IE6）的fadeIn和fadeOut的完整实现，不需要jQuery或任何其他第三方JS库：

function fadeIn( elem, ms )
{
  if( ! elem )
    return;

  elem.style.opacity = 0;
  elem.style.filter = "alpha(opacity=0)";
  elem.style.display = "inline-block";
  elem.style.visibility = "visible";

  if( ms )
  {
    var opacity = 0;
    var timer = setInterval( function() {
      opacity += 50 / ms;
      if( opacity >= 1 )
      {
        clearInterval(timer);
        opacity = 1;
      }
      elem.style.opacity = opacity;
      elem.style.filter = "alpha(opacity=" + opacity * 100 + ")";
    }, 50 );
  }
  else
  {
    elem.style.opacity = 1;
    elem.style.filter = "alpha(opacity=1)";
  }
}

function fadeOut( elem, ms )
{
  if( ! elem )
    return;

  if( ms )
  {
    var opacity = 1;
    var timer = setInterval( function() {
      opacity -= 50 / ms;
      if( opacity <= 0 )
      {
        clearInterval(timer);
        opacity = 0;
        elem.style.display = "none";
        elem.style.visibility = "hidden";
      }
      elem.style.opacity = opacity;
      elem.style.filter = "alpha(opacity=" + opacity * 100 + ")";
    }, 50 );
  }
  else
  {
    elem.style.opacity = 0;
    elem.style.filter = "alpha(opacity=0)";
    elem.style.display = "none";
    elem.style.visibility = "hidden";
  }
}

Answer 5

您正在寻找的是CSS，而不仅仅是js。 This article很好地解释了如何做。

function toggle() {
  let elem = document.getElementById("myDiv");
  
  if (elem.classList.contains('is-visible')) {
    elem.style.height = elem.scrollHeight + 'px';
    
    window.setTimeout(function () {
      elem.style.height = '0';
    }, 1);
    
    window.setTimeout(function () {
      elem.classList.remove('is-visible');
    }, 350);
    
  } else {
    var getHeight = function () {
      elem.style.display = 'block';
      var height = elem.scrollHeight + 'px';
      elem.style.display = '';
      return height;
    };

    var height = getHeight();
    elem.classList.add('is-visible');
    elem.style.height = height;

    window.setTimeout(function () {
      elem.style.height = '';
    }, 350);
  }
}

.toggle-content {
	display: none;
	height: 0;
  	opacity: 0;
	overflow: hidden;
	transition: height 350ms ease-in-out, opacity 750ms ease-in-out;
}

.toggle-content.is-visible {
	display: block;
	height: auto;
  	opacity: 1;
}

<button onclick="toggle();">click me</button>

<div class="toggle-content" id="myDiv">
  Here's some text we want to toggle visibility of.
</div>

有什么方法可以淡化我的按钮吗？

5 个答案: