Fatal编程技术网
  • javascript/
  • 如何使用这样的代码使div淡出而不是消失？（JavaScript）

如何使用这样的代码使div淡出而不是消失？（JavaScript）

javascript html css arrays for-loop

如何使用这样的代码使div淡出而不是消失？（JavaScript）,javascript,html,css,arrays,for-loop,Javascript,Html,Css,Arrays,For Loop,我做了一个div和一个按钮。创建了一个函数，用于更改JavaScript中div的不透明度。 然后我制作了一个不透明度的数组和一个循环，并在每个循环上保持我想要的不透明度。但我不知道怎么了？ 请不要给我建议我应该使用jQuery或其他库。我想用JavaScript来做！（没有任何图书馆） 请参阅我的代码：- <!DOCTYPE html> <html> <head> <link rel="icon" type="image/jpg" href="

我做了一个
div
和一个
按钮
。创建了一个函数，用于更改JavaScript中
div
的不透明度。
然后我制作了一个不透明度的
数组和一个
循环，并在每个循环上保持我想要的不透明度。但我不知道怎么了？

请不要给我建议我应该使用jQuery或其他库。我想用JavaScript来做！（没有任何图书馆）

请参阅我的代码：-


<!DOCTYPE html>
<html>
<head>
    <link rel="icon" type="image/jpg" href="http://s3images.coroflot.com/user_files/individual_files/original_240004_eFk2sUc1K3KyXWz60vHrALo5H.jpg">
    <title>JavaScript</title>
    <style>
        body
        {
            font-family:ebrima;
            color:black;
        }
        #box
        {
            height:100px;
            width:100px;
            background:red;
            opacity:1;
        }
    </style>
</head>


<body id="mainBody">

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


    <button type="button" id="b" onClick="lessTheOppacity()">OPACITY</button>


    <script>
    function lessTheOppacity()
    {
        var box = document.getElementById("box");
        var oppArray = ["0.9", "0.8", "0.7", "0.6", "0.5", "0.4", "0.3", "0.2", "0.1", "0"];

        for (var x = 0; x < 10;x++)
        {
            box.style.opacity=oppArray[x];
        }
    }
    </script>
</body>
</html>




JavaScript
身体
{
字体系列：ebrima；
颜色：黑色；
}
#盒子
{
高度：100px；
宽度：100px；
背景：红色；
不透明度：1；
}
不透明度
函数lessTheOpacity（）
{
var-box=document.getElementById（“box”）；
var oppArray=[“0.9”、“0.8”、“0.7”、“0.6”、“0.5”、“0.4”、“0.3”、“0.2”、“0.1”、“0”]；
对于（变量x=0；x<10；x++）
{
box.style.opacity=oppArray[x]；
}
}


定义函数，然后立即调用它

（2） 
++x
表示“将
x
的值增加一，然后给我该值”。我们使用它来递增
x
，并检查是否需要继续淡入元素

（3） 我们希望随着时间的推移逐渐消失。您的操作会同时发生，因此用户只能看到最后一个操作，
“0.0”

在这里，
setTimeout
在调用
next
函数并转到下一个不透明度之前等待100毫秒

有关更多信息，请参阅文档

进一步说明：

一种更灵活的方法是允许衰减时间变化，并相应地计算阶数，不总是有十阶，或具有非线性衰减。但这更复杂，这也是人们通常使用jQuery的原因


// this does a linear fade
function fade(element, duration) {
    var start = new Date;
    (function next() {
        var time = new Date - start;
        if(time < duration) {
            box.style.opacity = 1 - time / duration;
            requestAnimationFrame(next);
        } else {
            box.style.opacity = '0';
        }
    })();
}



//这会进行线性淡入
功能衰减（元素、持续时间）{
var开始=新日期；
（函数next（）{
var时间=新日期-开始；
如果（时间<持续时间）{
box.style.opacity=1-时间/持续时间；
requestAnimationFrame（下一步）；
}否则{
box.style.opacity='0'；
}
})();
}




另外，如果您可以依赖支持CSS3转换的浏览器，我会考虑这样做。它更干净，通常是首选

定义函数，然后立即调用它

（2） 
++x
表示“将
x
的值增加一，然后给我该值”。我们使用它来递增
x
，并检查是否需要继续淡入元素

（3） 我们希望随着时间的推移逐渐消失。您的操作会同时发生，因此用户只能看到最后一个操作，
“0.0”

在这里，
setTimeout
在调用
next
函数并转到下一个不透明度之前等待100毫秒

有关更多信息，请参阅文档

进一步说明：

一种更灵活的方法是允许衰减时间变化，并相应地计算阶数，不总是有十阶，或具有非线性衰减。但这更复杂，这也是人们通常使用jQuery的原因


// this does a linear fade
function fade(element, duration) {
    var start = new Date;
    (function next() {
        var time = new Date - start;
        if(time < duration) {
            box.style.opacity = 1 - time / duration;
            requestAnimationFrame(next);
        } else {
            box.style.opacity = '0';
        }
    })();
}



//这会进行线性淡入
功能衰减（元素、持续时间）{
var开始=新日期；
（函数next（）{
var时间=新日期-开始；
如果（时间<持续时间）{
box.style.opacity=1-时间/持续时间；
requestAnimationFrame（下一步）；
}否则{
box.style.opacity='0'；
}
})();
}





另外，如果您可以依赖支持CSS3转换的浏览器，我会考虑这样做。它更干净，而且通常是首选。
不要遍历可以轻松计算的值数组。这将向您展示它的工作原理：


var opacity = 1;
function lto() {
    var box = document.getElementById('box');
    opacity -= 0.1;
    if (opacity < 0)
        {opacity = 1; return;}
    box.style.opacity = opacity;
    setTimeout(lto, 100);
}



var不透明度=1；
函数lto（）{
var-box=document.getElementById（'box'）；
不透明度-=0.1；
如果（不透明度<0）
{不透明度=1；返回；}
box.style.opacity=不透明度；
设置超时（lto，100）；
}



在您的情况下，从完全不透明运行到透明，浏览器甚至没有机会重新绘制。因此，不要使用上面的函数，而是使用一些异步事件（
setTimeout（…）
）来实际调用
lto
函数不要遍历可以轻松计算的值数组。这将向您展示它的工作原理：


var opacity = 1;
function lto() {
    var box = document.getElementById('box');
    opacity -= 0.1;
    if (opacity < 0)
        {opacity = 1; return;}
    box.style.opacity = opacity;
    setTimeout(lto, 100);
}



var不透明度=1；
函数lto（）{
var-box=document.getElementById（'box'）；
不透明度-=0.1；
如果（不透明度<0）
{不透明度=1；返回；}
box.style.opacity=不透明度；
设置超时（lto，100）；
}



在您的情况下，从完全不透明运行到透明，浏览器甚至没有机会重新绘制。因此，不要使用上面的函数，而是使用一些异步事件（
setTimeout（…）
）来实际调用
lto
函数。但是您可以使用jQuery代替JavaScript


<!DOCTYPE html>
<html>
<head>
    <link rel="icon" type="image/jpg" href="http://s3images.coroflot.com/user_files/individual_files/original_240004_eFk2sUc1K3KyXWz60vHrALo5H.jpg">
    <title>JavaScript</title>
    <style>
        body
        {
            font-family:ebrima;
            color:black;
        }
        #box
        {
            height:100px;
            width:100px;
            background:red;
            opacity:1;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>


<body id="mainBody">

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


    <input type="button" class="opacity" value="opacity" />


    <script>
         $(".opacity").click(function () {
             $('#box').toggle("slow");
         });  
    </script>
</body>
</html>




JavaScript
身体
{
字体系列：ebrima；
颜色：黑色；
}
#盒子
{
高度：100px；
宽度：100px；
背景：红色；
不透明度：1；
}
$（“.opacity”）。单击（函数（）{
$（“#框”）。切换（“慢”）；
});  



这更容易。您可以使用切换（）、滑动切换（）或淡入淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡。但是您可以使用jQuery代替JavaScript


<!DOCTYPE html>
<html>
<head>
    <link rel="icon" type="image/jpg" href="http://s3images.coroflot.com/user_files/individual_files/original_240004_eFk2sUc1K3KyXWz60vHrALo5H.jpg">
    <title>JavaScript</title>
    <style>
        body
        {
            font-family:ebrima;
            color:black;
        }
        #box
        {
            height:100px;
            width:100px;
            background:red;
            opacity:1;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>


<body id="mainBody">

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


    <input type="button" class="opacity" value="opacity" />


    <script>
         $(".opacity").click(function () {
             $('#box').toggle("slow");
         });  
    </script>
</body>
</html>




JavaScript
身体
{
字体系列：ebrima；
颜色：黑色；
}
#盒子
{
高度：100px；
宽度：100px；
背景：红色；
不透明度