How slideDown() function works in jQuery event handler ?
Last Updated :
22 May, 2023
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...