मैं चाहता हूं कि मेरा <div> धीरे-धीरे दिखाई देने लगे!

यह मेरा कोड है:

var Thread = {
    sleep: function(ms) {
        var start = Date.now();

        while (true) {
            var clock = (Date.now() - start);
            if (clock >= ms) break;
        }

    }
};



function anime()
{

    var elem = document.getElementById('tagd');


    document.getElementById('tagd').style.opacity += 0.4;
    console.log(document.getElementById('tagd').style.opacity);

    Thread.sleep(1000);

    document.getElementById('tagd').innerHTML ="<h1>Sometext</h1>";
    console.log("do");
function frame()
    {
            num = 0.1;
            elem.style.opacity += num;

    }


}

यह काम करता है, लेकिन जब मैं इसे बदलता हूं:

var Thread = {
    sleep: function(ms) {
        var start = Date.now();

        while (true) {
            var clock = (Date.now() - start);
            if (clock >= ms) break;
        }

    }
};



function anime()
{

    var elem = document.getElementById('tagd');


    document.getElementById('tagd').style.opacity += 0.4;
    console.log(document.getElementById('tagd').style.opacity);

    Thread.sleep(1000);



document.getElementById('tagd').style.opacity += 0.4;
        console.log(document.getElementById('tagd').style.opacity);


function frame()
    {
            num = 0.1;
            elem.style.opacity += num;

    }


}

या setInterval दूसरी बार opacity के साथ नहीं बदलता है! तेजी, मैं एक से अधिक बार अस्पष्टता नहीं बदल सकता ..

एचटीएमएल/सीएसएस कोड नीचे:

<html>

<style>
#tagd{
width: 500px;
height: 500px;
background: darkred;
opacity: 0;
}
</style>

<head>
<script src="test.js"></script>
</head>


<body>

<input type="button" onclick="anime()">

<div id="tagd"></div>

</body>

</html>
0
Shahab Ouraie 8 जुलाई 2019, 13:44

1 उत्तर

सबसे बढ़िया उत्तर

आप JS के बजाय CSS ट्रांज़िशन का उपयोग करके देख सकते हैं। दो CSS कक्षाएं बनाएं और JS का उपयोग करके उन्हें बदलें।

उदाहरण के लिए। सीएसएस:

#tagd {
    opacity: 0;
}


.visible {
    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -ms-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
    opacity: 1!important;
}

जेएस:

function anime() {
    var element = document.getElementById("tagd");
    element.classList.toggle("visible");
}
1
Alexander 8 जुलाई 2019, 13:55