Question

我已经为着陆页整理了一个模糊/有效。然而它的工作方式也不太合适，我不知道为什么。

它很好地模糊了，问题在于当我希望底层Div出现时，我希望它“淡入”，因为它只是在淡出结束后出现。

这是一个片段：

splash = document.getElementById('intro');
content = document.getElementById('content');

	function enterSite (element) {
		opac = 1;
		fps = 1000/30;
		function decrease() {
			opac -= 0.02;
			if (opac <= 0.1){
				splash.style.display = 'none';
				return true;
			}
		splash.style.opacity = opac;
		setTimeout(decrease,fps);
		}
		function increase() {
			opac += 0.02;
			if (opac >= 0.1){
				content.style.display = 'block';
				return false;
			}
		content.style.opacity = opac;
		setTimeout(increase,fps);
		}
		decrease(), increase();
	}

html, body {
    overflow: hidden;
}
main {
    width: 100%;
    height: 100vh;
    position: relative;
}
#intro {
    background-image: url(Images/splash.jpg);   
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    text-align: center;
    height: 100vh;
}
#splash {
    margin: auto;
    width: 40%;
    background-color: rgba(56,56,56,0.4);
    border-radius: 50px 50px;
}
#splash-p {
    width: 70%;
    font-size: 1.2em;
    line-height: 1.5em;
    margin: auto;
    text-align: center;
    padding-top: 10px;
    color: #fff;
}
.btn {
    width: 35%;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Main Content Page */

article {
    position: absolute;
    height: 100vh;
    background-color: red;
}

<main>
		<div id="intro">
			<div id="splash">

			<p id="splash-p">Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing.</p> 

			<input type="image" src="Images/Button.png" class="btn" onclick="enterSite()">

			</div>
		</div>

		<article id="content">
			
			Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,Just a random piece of online text that means nothing,

		</article>

	</main>

Answer 1

我认为你可以从更多的东西中获益，而不是嵌套这么多的函数和调用。此外，使用setInterval()而不是重复setTimeout()可能会有所帮助。

splash = document.getElementById('intro');
content = document.getElementById('content');
var fadeOut = null;
var fadeIn = null;
opac = 1;
fps = 1000/30;

function increase() {
    content.style.opacity = opac;
    opac += 0.02;

    if (opac >= 1){ //Opacity is 100%
      window.clearInterval(fadeIn); //Stop fade-in
    }

}

function decrease() {
    splash.style.opacity = opac;
    opac -= 0.02;

    if (opac < 0.1){ //If object is almost gone
        splash.style.display = 'none'; //Hide it completely
        window.clearInterval(fadeOut); //Stop fade-out

        content.style.display = 'block'; //Set up new content
        content.style.opacity = 0;
        fadeIn = setInterval(increase, fps); //Begin fade-in

    }
}

function enterSite () {
    fadeOut = setInterval(decrease, fps); //Start the fadeout
}

JSFiddle

如何在对底层Div的模糊效果后生效模糊

1 个答案: