JQuery Toggle Slide – De gauche à droite

Il n’existe pas de méthode telle que slideLeft() et slideRight() qui semble à slideUp() et slideDown(), mais vous pouvez simuler ces effets à l’aide de la fonction animate() de jQuery.
Exemple jQuery slideUp() et slideDown()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…Lire plus  

Code source :
<!DOCTYPE html>
<html>
	<head>
		<title>JQuery Toggle Slide - De gauche à droite </title>
		<style type="text/css">
			.text{
				width: 500px;
				margin-top: 10px;
        float:left;
        overflow: hidden;
			}
		</style>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				var DivWidth = $(".text").width();
				$(".left").click(function(){
					$(".text").animate({
						width: 0
					});
				});
				$(".right").click(function(){
					$(".text").animate({
						width: DivWidth
					});
				});
			});
		</script>
	</head>
	<body>
        <button type="button" class="left">Défilement vers la gauche</button>
		<button type="button" class="right">Défilement vers la droite</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
JQuery Toggle Slide - De gauche à droite
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.

 
 
L’exemple suivant fera défiler le bloc div de droite à gauche et de gauche à droite

<!DOCTYPE html>
<html>
	<head>
		<title>JQuery Toggle Slide - De gauche à droite </title>
		<style type="text/css">
			.text{
				width: 500px;
				margin-top: 10px;
				float:left;
				overflow: hidden;
			}
		</style>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$(".left-right").click(function(){
					$(".text").animate({
						width: "toggle"
					});
				});
			});
		</script>
	</head>
	<body>
		<button type="button" class="left-right">Left / Right</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
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
Partagez cet article

Laisser un commentaire

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