jQuery slideUp ()
The jQuery slideUp() method is used to create a sliding-up animation on
elements, gradually decreasing their height until they are completely
hidden. It’s commonly used to hide content with a smooth animation
effect.
Syntax
$(selector).slideUp(speed, callback);
- speed (Optional):specifies the speed of the slide-up animation.Can be "slow", "fast", or a time in milliseconds (e.g., 400).
- callback (Optional):A function to be executed after the slide-up animation completes.
<!DOCTYPE html>
<html>
<head>
<title>jQuery slideUp() Example</title>
<style>
#content {
background-color: lightgreen;
padding: 20px;
border: 1px solid #ccc;
margin-top: 10px;
}
</style>
</head>
<body>
<button id="hideButton">Hide Content</button>
<div id="content">
<p>This is the content that will slide up when you
click the button!</p>
</div>
<script>
$(document).ready(function(){
$("#hideButton").click(function(){
$("#content").slideUp(1000, function() {
alert("Content is now hidden!");
});
});
});
</script>
</body>
</html>
