Exemple jQuery: slideUp() et slideDown()

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.

 
 
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.
QCM jQueryQCM jQuery – Partie 1QCM sur jQuery avec des réponses pour la préparation des test techniques, des tests en ligne, aux examens et aux certifications. Ces questions et réponses…Lire plus

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *