在没有jquery的纯javascript中淡入淡出_Javascript_Fadein_Fade_Fadeout

在没有jquery的纯javascript中淡入淡出

javascript

在没有jquery的纯javascript中淡入淡出,javascript,fadein,fade,fadeout,Javascript,Fadein,Fade,Fadeout,在这里，我有一个函数，可以在页面加载后立即用id=“box”淡出方形框。我尝试过，但没有找到如何再次淡入框中，或者仅仅是如何淡入框中，或者使用纯JavaScript而不是jQuery的元素。以下是我的fadeOut（）函数代码： var-box=document.getElementById（'box'）；功能衰减（要素、速度） { 如果（！元素样式不透明度） { elem.style.opacity=1； } setInterval（函数（）{ elem.style.opacity-=0

在这里，我有一个函数，可以在页面加载后立即用

id=“box”

淡出方形框。我尝试过，但没有找到如何再次淡入框中，或者仅仅是如何淡入框中，或者使用纯JavaScript而不是jQuery的元素。以下是我的

fadeOut（）

函数代码：

var-box=document.getElementById（'box'）；
功能衰减（要素、速度）
{
如果（！元素样式不透明度）
{
elem.style.opacity=1；
}
setInterval（函数（）{
elem.style.opacity-=0.02；
}速度(1/50),；
}
淡出（框，2000年）
#框
{
宽度：100px；
高度：100px；
背景颜色：蓝色；
}
我建议使用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;
}

您只需将淡出类添加到元素
如果您想要纯JavaScript解决方案，可以使用以下方法：

HTML
JavaScript
var-box=document.getElementById（'box'）；
功能衰减（要素、速度）{
如果（！元素样式不透明度）{
elem.style.opacity=1；
}//如果结束，则结束
var outinerval=setInterval（函数（）{
elem.style.opacity-=0.02；
如果（elem.style.opacity=1）
清除间隔（区间）；
}速度(1/50),；
}//如果结束，则结束
}速度(1/50),；
}//结束衰减（）
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.02elem.style.opacity
位于'0.02'
，它将变成elem.style.opacity='0.02'+0.02，它正在变成elem.style.opacity='0.020.02'，浏览器JavaScript引擎（ahem）将其大量解析为0.020
（因为它需要CSS不透明度属性的有效数值！），这导致不透明度卡在0.02
。天哪！这就是为什么我必须在做加法之前将演员阵容添加到数字中

我的解决方案不是真正的纯Js，因为它涉及到像@Anarion那样的CSS动画，但我包含了在像onclick
这样的事件中执行此操作所需的Js代码。请查看：

函数showHelloWorld（）{
var helloWorldElement=document.getElementById（'hello-world'）；
helloWorldElement.classList.remove（'hide'，'fade-out'）；
helloWorldElement.classList.add（'fade-in'）
}
函数hideHelloWorld（）{
var helloWorldElement=document.getElementById（'hello-world'）；
helloWorldElement.classList.add（'fade-out'）；
helloWorldElement.classList.remove（'fade-in'）；
setTimeout（函数（）{
helloWorldElement.classList.add（'hide'）；
}，2000）//请注意，此间隔与CSS动画的计时相匹配
}


正文{
文本对齐：居中；
}
#你好，世界{
字体大小：36px；
}
.隐藏{
显示：无；
}
.淡入{
动画：2s fadeIn；
}
.淡出{
动画：2s衰减；
}
@关键帧淡入淡出{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
@关键帧淡出{
从{
不透明度：1；
}
到{
不透明度：0；
}
}
你好，世界


单击此处淡入
单击此处淡出

纯javascript
//乞讨
让mydiv=document.createElement（“div”）//创建div
让divtxt=window.document.createTextNode（“悬停我”）//创建文本节点
mydiv.appendChild（divtxt）//现在使用带有“hover me”文本的div
document.body.insertBefore（mydiv，document.body.childNodes[0]）//在html的脚本行之前插入
mydiv.style.width=“100px”//将div设置为100px
mydiv.style.fontSize=“1.5em”//font-Size填充div
mydiv.style.backgroundColor=“yellow”//div的背景色为黄色
让myp=document.createElement（“p”）//创建段落
让ptxt=document.createTextNode（“你好”）//创建文本节点
myp.appendChild（ptxt）//现在是带有“hello there”txt的p
document.body.insertBefore（myp，document.body.childNodes[1]）//在html脚本行之前插入
不透明度=1//从实际工作开始，不透明度等于1
mydiv.onmouseinter=（）=>{//on mouseover main func有两个函数，一个用于降低不透明度，另一个用于终止进程
mo=（）=>{//child func降低不透明度
不透明度-=.01//每10毫秒将不透明度降低0.01
myp.style.opacity=opacity//p减小时实际褪色发生在此处
}
设x=setInterval（mo，10）//interval使func充当循环，然后取x清除它
mo1=（）=>{//secound func终止第一个func
clearInterval（x）//在980毫秒后清除第一个func
myp.style.removeProperty（“不透明度”）//删除不透明度问题
myp.style.display=“无”//添加显示属性
<div id="box"></div>

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

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

<!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>