Как добавить плавный переход к объекту с помощью jQuery? - PullRequest
Новая
       12

Как добавить плавный переход к объекту с помощью jQuery?

0 голосов
/ 13 мая 2019

Я создаю веб-сайт 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>

1 Ответ

1 голос
/ 13 мая 2019

Просто добавьте некоторый переход к идентификатору навигационной панели. 

#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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...