El método toggle() se usa para oscilar entre las propiedades de CSS mientras se usa para producir el efecto de animación en los elementos. Los diversos efectos de jQuery son hide(), fade() y slide(). Básicamente, el método toggle() oscila entre la visualización de la propiedad CSS: ninguna si está presente, de lo contrario vuelve a su estado original.
Para hide(), fade() y slide() tienen funciones alternantes como hideToggle(),fadeToggle() y slideToggle().
Sintaxis:
$(selector).toggle(time, callback_function)
Ejemplo:
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"
letegrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
h1 {
color: #006600;
}
button {
color: white;
background-color: #006600;
width: 100px;
height: 30px;
}
body {
text-align: center;
}
div {
border: 2px solid black;
border-radius: 10px;
margin: 10px;
height: 150px;
width: 150px;
position: relative;
text-align: center;
display: flex;
left: 215px;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<button id="btn"> HIDE </button>
<div id="GFG_IMAGE">
<!-- Image added using img tag
with src attribute -->
<img src=
"https://write.geeksforgeeks.org/static/media/Group%20210.08204759.svg"
height='150px' width='150px'>
<img>
</div>
<script>
$('#btn').click(function () {
$('#btn').text($('#btn')
.text() === 'SHOW' ? 'HIDE' : 'SHOW');
$('div').toggle(2000)
});
</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