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()

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 jQuery

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.