javascript - 在页面加载时将 CSS id 淡入另一个-6ren

javascript - 在页面加载时将 CSS id 淡入另一个

转载作者：行者123 更新时间：2023-11-28 16:08:58

在页面加载时，我想淡入一个 CSS id，然后在几秒钟后我想淡入另一个 CSS id。有人知道我会为此使用什么 jquery 代码吗？

这是两个id的

#background {
background: url("images/am_photography_bg.jpg") no-repeat center -25px fixed;
background-size: 100%;
height: 100vh;
}

#background-blured {
background: url("images/am_photography_bg_blured.jpg") no-repeat center -25px fixed;
background-size: 100%;
height: 100vh;
opacity: .5;
}

这是我的html

<html>
<head>
</head>
<body>
<section>
    <div id="background"></div>
</section>
</html>

有什么想法吗？

我尝试将这段代码添加到我现有的 jQuery 中:

    $("#background").delay(1500).animate({
    background: url("images/am_photography_bg_blured.jpg") no-repeat center -25px fixed,
    opacity: .5,
}, 1000, function() {
    // Animation complete.
});

为了使这一切在一起:

$(document).ready(function() {

$('body').css('display', 'none')
$('body').fadeIn(1500);

$("#background").delay(1500).animate({
    background: url("images/am_photography_bg_blured.jpg") no-repeat center -25px fixed,
    opacity: .5,
}, 1000, function() {
    // Animation complete.
});

$("h1").delay(2000).animate({
    top: -30,
    opacity: 1,
}, 700, function() {
    // Animation complete.
});

$('.link').click(function() {
    event.preventDefault();
    newLocation = this.href;
    $('body').fadeOut(500, newpage);
});
});

function newpage() {
    window.location = newLocation;
}

但是它坏了。

最佳答案

是这样的吗？

  $('#background').addClass('background');

setTimeout(function() {
  $('#background').addClass('background-blured');
}, 2000);

  .background {
	background: blue url("images/am_photography_bg.jpg") no-repeat center -25px fixed;
	background-size: 100%;
	height: 100vh;
    }

    .background-blured {
    background: red url("images/am_photography_bg_blured.jpg") no-repeat center -25px fixed;
    background-size: 100%;
	height: 100vh;
    opacity: .5;
    }

#background {
   transition: all 2s ease-in-out;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>

	<section>
		<div id="background" class="background"></div>
	</section>

关于javascript - 在页面加载时将 CSS id 淡入另一个，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32624430/