The jQuery function slideDown() creates some effect reacting to some event handler. It displays hidden content with some effect of dropping the content downwards. The other related functions are slideUp() and slideToggle(). These functions also work in the same way as the slideDown() function works with different effects.
Syntax:
$('selector').slideDown();
$('selector').slideDown(speed, callbackFunction);
Note: The values of speed can be slow, fast, or any fixed ms. The callback function can also be added if necessary. And to make the effect initially, the content should have the display property as none.
Example 1: Let us see how the slideDown() function works in jQuery with some examples.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<script src=
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
h1 {
color: #006600;
}
body {
text-align: center;
}
#slider {
text-align: center;
padding: 5px;
border: 2px solid black;
color: #006600;
}
#GFG {
padding: 5px;
border: 2px solid black;
background-color: #006600;
font-size: xx-large;
color: whitesmoke;
height: auto;
display: none;
}
</style>
</head>
<body>
<h1> Geeks for Geeks</h1>
<p></p>
<div id="slider">
ENTER MOUSE TO SEE THE SLIDEDOWN EFFECT
</div>
<div id="GFG">
Geeks for Geeks
</div>
<script>
$(document).ready(function () {
$('#slider').mouseenter(function () {
$('#GFG').slideDown('slow');
})
});
</script>
</body>
</html>
|
Output:
Example 2: The following example demonstrates the jQuery mouseenter() and mouseleave() events.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src=
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
h1 {
color: #006600;
}
body {
text-align: center;
}
#slider {
text-align: center;
padding: 5px;
border: 2px solid black;
color: #006600;
}
#GFG {
padding: 5px;
border: 2px solid black;
background-color: #006600;
font-size: xx-large;
color: whitesmoke;
height: auto;
display: none;
}
</style>
</head>
<body>
<h1> Geeks for Geeks</h1>
<div id="slider">
ENTER AND LEAVE MOUSE TO
SEE THE SLIDEDOWN EFFECT
</div>
<div id="GFG">
Geeks for Geeks
</div>
<script>
$(document).ready(function () {
$('#slider').mouseenter(function () {
$('#GFG').slideDown('slow');
})
$('#slider').mouseleave(function () {
$('#GFG').slideDown('slow');
$('#GFG').css({
'background-color': 'yellow',
'color': '#006600'
});
})
});
</script>
</body>
</html>
|
Output:
Example 3: We can also add the slideDown() method for an image. We can place an image in the div click event.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<script src=
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
h1 {
color: #006600;
}
body {
text-align: center;
}
#slider {
text-align: center;
padding: 5px;
border: 2px solid black;
color: #006600;
}
#GFG {
padding: 5px;
border: 2px solid black;
height: auto;
display: none;
}
</style>
</head>
<body>
<h1> Geeks for Geeks</h1>
<div id="slider">
CLICK TO SEE THE SLIDEDOWN EFFECT
</div>
<div id="GFG">
<img src=
<img>
</div>
<script>
$(document).ready(function () {
$('#slider').click(function () {
$('#GFG').slideDown('slow');
})
});
</script>
</body>
</html>
|
Output:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!