Question

这里我有一个函数，一旦页面加载就会淡化带id="box"的方框。我尝试但未能找到如何再次淡入盒子或仅仅是如何淡入盒子或纯粹的JavaScript而不是jQuery的元素。这是我的fadeOut()函数代码：

＆＃13;

var box = document.getElementById('box');

function fadeOut(elem, speed)
	{

	if(!elem.style.opacity)
	{
		elem.style.opacity = 1;
	}
	setInterval(function(){

 elem.style.opacity -= 0.02;
 
	}, speed /50);
}

fadeOut(box, 2000);

＆＃13;

#box
{
  width: 100px;
  height: 100px;
  background-color: blue;
  }

＆＃13;

<div id="box"></div>

＆＃13;

非常感谢贡献者。欢呼声

Answer 1

我建议使用CSS动画

@-webkit-keyframes fadeout {
    0% {opacity:1;}
    100% {opacity:0;}
}
@keyframes fadeout {
    0% {opacity:1;}
    100% {opacity:0;}
}
.fadeOut {
  opacity:0;
  -moz-animation   : fadeout 1s linear;
  -webkit-animation: fadeout 1s linear;
  animation        : fadeout 1s linear;
}

您只需要将fadeOut类添加到元素

Answer 2

如果您需要纯JavaScript解决方案，可以使用：

http://jsfiddle.net/3weg2zj1/1/

HTML

<div id="box"></div>

CSS

#box {
    width:100px;
    height:100px;
    background-color:blue;
}

的JavaScript

var box = document.getElementById('box');

function fadeOutIn(elem, speed ) {

    if (!elem.style.opacity) {
        elem.style.opacity = 1;
    } // end if

    var outInterval = setInterval(function() {
        elem.style.opacity -= 0.02;
        if (elem.style.opacity <= 0) {
            clearInterval(outInterval);
            var inInterval = setInterval(function() {
                elem.style.opacity = Number(elem.style.opacity)+0.02;
                if (elem.style.opacity >= 1)
                    clearInterval(inInterval);
            }, speed/50 );
        } // end if
    }, speed/50 );

} // end fadeOut()

fadeOutIn(box, 2000 );

通常，您必须捕获setInterval()调用返回的间隔标识符，以便以后取消它。请注意，在上面的代码中，这涉及outInterval和inInterval上的关闭。
对于此特定代码，您可以测试不透明度是否等于或低于下限阈值（我使用零），然后清除现有的间隔过程，并启动一个新的反转动画。
在反向间隔过程中，您可以增加不透明度，然后针对上限阈值进行测试，以决定何时清除新的间隔过程。
尝试增加elem.style.opacity时遇到了一个奇怪的问题：+=运算符拒绝工作。在大概10分钟的坐着和凝视（以及一些实验）之后，我终于发现elem.style.opacity总是被迫成为一个字符串（也许所有 CSS链接的属性都是这样的... 。），所以+运算符（以及+=运算符的扩展名）正在进行字符串连接，在elem.style.opacity += 0.02;的幼稚LoC下，变为elem.style.opacity = elem.style.opacity+0.02; ，如果我们假设elem.style.opacity位于'0.02'，则会变成elem.style.opacity = '0.02'+0.02;，而elem.style.opacity = '0.020.02';变成0.020，浏览器JavaScript引擎（ahem）慷慨地解析为0.02（因为它需要CSS opacity属性的有效数值！），这导致不透明度卡在{{1}}。哇靠！这就是为什么我必须在添加之前添加cast-to-number。

Answer 3

我的解决方案不是真正的Js，因为它涉及CSS动画（例如@Anarion），但是我包含了在诸如onclick之类的事件上执行此操作所需的Js代码。检查一下：

function showHelloWorld(){
  var helloWorldElement = document.getElementById('hello-world');
  
  helloWorldElement.classList.remove('hide','fade-out');
  
  helloWorldElement.classList.add('fade-in')
  
}

function hideHelloWorld(){
   var helloWorldElement = document.getElementById('hello-world');
  helloWorldElement.classList.add('fade-out');
  helloWorldElement.classList.remove('fade-in');
  setTimeout(function(){
    helloWorldElement.classList.add('hide');
  },2000)  //Note that this interval matches the timing of CSS animation
}

body{
  text-align:center;
}

#hello-world{ 
  font-size:36px;
}

.hide{
  display:none;
}

.fade-in{
  animation: 2s fadeIn;
}


.fade-out{
  animation: 2s fadeOut;
}

@keyframes fadeIn{
  from{
    opacity:0;
  }
  
  to{
    opacity:1;
  }
}


@keyframes fadeOut{
  from{
    opacity:1;
  }
  
  to{
    opacity:0;
  }
}

<div id="hello-world" class="hide">Hello World</div>
<br>
<button onclick="showHelloWorld()">Click Here To Fade In</button>

<button onclick="hideHelloWorld()">Click Here To Fade Out</button>

Answer 4

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>pure javascript</title>
    <link rel="stylesheet" href="2.css">
</head>
<body>
    <script type="text/javascript" src="jquery-3.js"></script>
    <script type="text/javascript"> //begging of js
         let mydiv =document.createElement("div") //creating div
         let divtxt=window.document.createTextNode("hover me") //creating text node 
         mydiv.appendChild(divtxt) //now div with "hover me" text
         document.body.insertBefore(mydiv,document.body.childNodes[0])//insert before the script line in html
         mydiv.style.width="100px" //styling the div to 100px
         mydiv.style.fontSize="1.5em" //stylling the div with font Size
         mydiv.style.backgroundColor="yellow" //div has backgroundColor yellow
         let myp   =document.createElement("p") //create paragraph
         let ptxt=document.createTextNode("hello there") //create text node
         myp.appendChild(ptxt) //now p with "hello there" txt
         document.body.insertBefore(myp,document.body.childNodes[1]) //insert before script line in html
         let opacity=1; //begining with real work with opacity equal to 1 

          mydiv.onmouseenter=()=>{ //on mouseover main func that has 2 funcs one for reducing the opacity and another for terminate the process 
            mo=()=>{//child func to lower the opacity
            opacity-=.01 //lowering opacity by .01 every 10 mili sec
          myp.style.opacity=opacity//the actual fading happen here where the p is reduced
          }
       let x = setInterval(mo,10) //interval to make the func act as a loop and take x to clear it up later
        mo1=()=>{//secound func to terminate the first func
            clearInterval(x) //clear the first func after 980 mili sec
          myp.style.removeProperty("opacity")//removing opacity proberty 
          myp.style.display="none"//adding dispaly property and equall to none
         }
         setTimeout(mo1,980) //terminate the first func in 980 mili sec
          }
          mydiv.onmouseleave=()=>{ //second main func on mouseleave
            myp.style.removeProperty("display")//fisrt we got to remove dispaly none and raise the opacity
        mo=()=>{func to raise the opacity
          myp.style.removeProperty("display")//why i added it again just to make sure display property is removed
          opacity+=.01//increase opacity by .01
         myp.style.opacity=opacity//equalling the opacity of p  with the new opacity 
         }
        let y = setInterval(mo,10) //make the function to act as loop again 
       mo1=()=>{//sec func to terminate the first func
         clearInterval(y)//clearing the fisrt function

           myp.style.removeProperty("opacity")//remove opacity property
       }
        setTimeout(mo1,980)//wiaiting to stop the first func
      }
    </script>//end
</body>
</html>

纯javascript

淡入淡出并在没有jquery的纯JavaScript中淡出

4 个答案:

HTML

CSS

的JavaScript