jQuery provides several methods for creating sliding effects on your web elements. These methods include .slideDown(), .slideToggle(), and .slideUp(). Each of these methods allows you to animate elements with a sliding effect, enhancing the user experience on your website.
.slideDown()
The .slideDown() method displays the matched elements with a sliding effect. It is used to reveal hidden content with a smooth animation.
Example:
$('#clickme').click(function() {
$('#imageNew').slideDown('slow', function() {
// Animation complete.
});
});
.slideToggle()
The .slideToggle() method is used to either display or hide the matched element with a sliding effect. It toggles the visibility of the element, showing it if it is hidden and hiding it if it is visible.
.slideUp()
The .slideUp() method hides the element with a sliding effect. It is useful for collapsing or hiding content with an animation.
Example (for slideToggle() & slideUp()):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery SlideToggle Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
$("#click_here").click(function(event) {
event.preventDefault();
$("#div1").slideToggle();
});
$("#div1 a").click(function(event) {
event.preventDefault();
$("#div1").slideUp();
});
});
</script>
</head>
<body>
<input type="button" id="click_here" value="Click Here">
<div id="div1">
<a href="#" class="close">[x]</a>
<p>
This window displays because the button click fires slideToggle event, which slides up the window. CLICK ON [X] TO SLIDE UP/CLOSE THE WINDOW.
</p>
</div>
</body>
</html>
Comments
Post a Comment