La función jQuery slideDown() crea algún efecto que reacciona a algún controlador de eventos. Muestra contenido oculto con algún efecto de soltar el contenido hacia abajo. Las otras funciones relacionadas son slideUp() y slideToggle() . Estas funciones también funcionan de la misma manera que la función slideDown() funciona con diferentes efectos.
Sintaxis:
$('selector').slideDown();
$('selector').slideDown(speed, callbackFunction);
Nota: Los valores de velocidad pueden ser lentos , rápidos o cualquier ms fijo . La función de devolución de llamada también se puede agregar si es necesario. Y para hacer el efecto inicialmente, el contenido debe tener la propiedad de visualización como none .
Ejemplo 1: Veamos cómo funciona la función slideDown() en jQuery con algunos ejemplos.
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">
<!-- Including jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
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>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra los eventos jQuery mouseenter() y mouseleave() .
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">
<!-- Including jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
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>
Producción:
Ejemplo 3: También podemos agregar el método slideDown() para una imagen. Podemos colocar una imagen en el evento de clic div .
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">
<!-- Including jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
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">
<!-- Image added using img tag with src attribute -->
<img src=
"https://write.geeksforgeeks.org/static/media/Group%20210.08204759.svg">
<img>
</div>
<script>
$(document).ready(function () {
$('#slider').click(function () {
$('#GFG').slideDown('slow');
})
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA