Question

在编写导航栏代码的阶段，我正在创建一个HTML网站。我正在使用Bootstrap进行样式设置，并且我有一个jQuery函数来更改有关颜色的导航栏的类。当颜色改变时，我想要一个平滑的过渡。我该怎么办？

$(document).ready(function() {
	getScroll();
});

$(window).scroll(function() {
	getScroll();
});

function getScroll() {
	var scroll  = $(window).scrollTop();
	if (scroll <= 50) {
		$("#navbar").removeClass("bg-white");
		$("#navbar").addClass("bg-transparent");
	} else {
		$("#navbar").removeClass("bg-transparent");
		$("#navbar").addClass("bg-white");
	}
}

.navbar-nav > li {
	padding-left: 30px;
	padding-right: 30px;
}

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body class="bg-dark">
<nav class="navbar navbar-expand-sm fixed-top" id="navbar">
<ul class="navbar-nav ml-auto nav-fill">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tutorials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">More...</a>
</li>
</ul>
</nav>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>

Answer 1

只需向导航栏ID添加一些过渡即可。

#navbar {
        transition: all 2s;
    }

$(document).ready(function() {
	getScroll();
});

$(window).scroll(function() {
	getScroll();
});

function getScroll() {
	var scroll  = $(window).scrollTop();
	if (scroll <= 50) {
		$("#navbar").removeClass("bg-white");
		$("#navbar").addClass("bg-transparent");
	} else {
		$("#navbar").removeClass("bg-transparent");
		$("#navbar").addClass("bg-white");
	}
}

.navbar-nav > li {
	padding-left: 30px;
	padding-right: 30px;
}

#navbar {
    transition: all 2s;
}

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body class="bg-dark">
<nav class="navbar navbar-expand-sm fixed-top" id="navbar">
<ul class="navbar-nav ml-auto nav-fill">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tutorials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">More...</a>
</li>
</ul>
</nav>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>

如何使用jQuery向对象添加平滑过渡？

1 个答案: