Exemple jQuery: slideUp() et slideDown()

juillet 3, 2019février 10, 2020 Amine KOUIS Aucun commentaire

Vous pouvez utiliser les méthodes slideUp() et slideDown() de jQuery pour masquer et afficher les éléments avec un mouvement de glissement régulier à l’aide d’une seule ligne de code.

Code source :

<!DOCTYPE html>
<html>
	<head>
		<title>Exemple jQuery: slideUp() et slideDown()</title>
		<style type="text/css">
			.text{
				width: 500px;
				border: 1px solid black;
        margin-top: 10px;
			}
		</style>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$(".up").click(function(){
					$(".text").slideUp();
				});
				$(".down").click(function(){
					$(".text").slideDown();
				});
			});
		</script>
	</head>
	<body>
		<button type="button" class="up">Go Up</button>
		<button type="button" class="down">Go Down</button>
		<div class="text">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, quam eget tristique facilisis, augue magna tempor sapien, non ultricies lacus mi ut lorem. Morbi ligula odio, malesuada vitae nulla sed, ullamcorper sodales urna. Proin at lectus dui. Pellentesque rutrum purus sit amet erat convallis, nec volutpat sapien vulputate. Pellentesque pharetra massa nec imperdiet commodo. Pellentesque felis est, congue eget consequat at, vestibulum in enim.
		</div>
	</body>
</html>

Résultat
Exemple jQuery: slideUp() et slideDown() Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, quam eget tristique facilisis, augue magna tempor sapien, non ultricies lacus mi ut lorem. Morbi ligula odio, malesuada vitae nulla sed, ullamcorper sodales urna. Proin at lectus dui. Pellentesque rutrum purus sit amet erat convallis, nec volutpat sapien vulputate. Pellentesque pharetra massa nec imperdiet commodo. Pellentesque felis est, congue eget consequat at, vestibulum in enim.

Résultat

Exemple jQuery: slideUp() et slideDown()

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, quam eget tristique facilisis, augue magna tempor sapien, non ultricies lacus mi ut lorem. Morbi ligula odio, malesuada vitae nulla sed, ullamcorper sodales urna. Proin at lectus dui. Pellentesque rutrum purus sit amet erat convallis, nec volutpat sapien vulputate. Pellentesque pharetra massa nec imperdiet commodo. Pellentesque felis est, congue eget consequat at, vestibulum in enim.

Vous pouvez également utiliser la méthode slideToggle() de jQuery qui exécute les animations de telle sorte que, si l’élément est initialement affiché, il sera masqué. et s’il est masqué, il sera affiché. Voici un exemple:

<!DOCTYPE html>
<html>
	<head>
		<title>Exemple jQuery: slideUp() et slideDown()</title>
		<style type="text/css">
			.text{
				width: 500px;
				border: 1px solid black;
				margin-top: 10px;
			}
		</style>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$(".up-down").click(function(){
					$(".text").slideToggle();
				});
			});
		</script>
	</head>
	<body>
    <button type="button" class="up-down">UP / Down</button>
		<div class="text">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, quam eget tristique facilisis, augue magna tempor sapien, non ultricies lacus mi ut lorem. Morbi ligula odio, malesuada vitae nulla sed, ullamcorper sodales urna. Proin at lectus dui. Pellentesque rutrum purus sit amet erat convallis, nec volutpat sapien vulputate. Pellentesque pharetra massa nec imperdiet commodo. Pellentesque felis est, congue eget consequat at, vestibulum in enim.
		</div>
	</body>
</html>

Résultat
Exemple jQuery: slideUp() et slideDown() Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum, quam eget tristique facilisis, augue magna tempor sapien, non ultricies lacus mi ut lorem. Morbi ligula odio, malesuada vitae nulla sed, ullamcorper sodales urna. Proin at lectus dui. Pellentesque rutrum purus sit amet erat convallis, nec volutpat sapien vulputate. Pellentesque pharetra massa nec imperdiet commodo. Pellentesque felis est, congue eget consequat at, vestibulum in enim.

Résultat

Exemple jQuery: slideUp() et slideDown()