Dado un elemento div. La tarea es eliminarlo con un efecto fadeOut usando JQuery. Aquí hay algunos métodos discutidos.
Primeros métodos para saber.
- Método jQuery text():
Este método establece/devuelve el contenido de texto de los elementos seleccionados.
Si se utiliza este método para devolver contenido, proporciona el contenido de texto de todos los elementos coincidentes (se eliminarán las etiquetas HTML).
Si este método se usa para configurar el contenido, reemplaza el contenido de TODOS los elementos coincidentes.
Sintaxis:- Devuelve contenido de texto:
$(selector).text()
- Establece el contenido del texto:
$(selector).text(content)
- Establecer contenido de texto usando una función:
$(selector).text(function(index, curContent))
Parámetros:
- contenido: Este parámetro es obligatorio. Especifica el nuevo contenido de texto para los elementos seleccionados.
- function(index, curContent): Este parámetro es opcional. Especifica una función que devuelve el nuevo contenido de texto para los elementos seleccionados.
- index: Devuelve la posición del índice del elemento en el conjunto.
- curContent: Devuelve el contenido actual de los elementos seleccionados.
- Devuelve contenido de texto:
- Método jQuery Effect fadeOut()
Este método cambia gradualmente la opacidad, para los elementos seleccionados, de visible a oculto (efecto de desvanecimiento).
Sintaxis:$(selector).fadeOut(speed, easing, callback)
Parámetros:
- velocidad: Este parámetro es opcional. Especifica la velocidad del efecto de desvanecimiento. Valor predeterminado = 400 milisegundos.
Valores aplicables.- milisegundos
- «lento»
- «rápido»
- aceleración: este parámetro es opcional. Especifica la velocidad del elemento en diferentes puntos de la animación. Valor por defecto = “oscilación”.
Valores aplicables.- “swing”: Comienza lentamente, pero más rápido en el medio.
- “lineal”: Se mueve a una velocidad constante.
- devolución de llamada: este parámetro es opcional. Especifica una función que se ejecutará después de que se complete el método fadeOut().
- velocidad: Este parámetro es opcional. Especifica la velocidad del efecto de desvanecimiento. Valor predeterminado = 400 milisegundos.
- Método jQuery on()
Este método agrega uno o más controladores de eventos para los elementos seleccionados y los elementos secundarios.
Sintaxis:$(selector).on(event, childSelector, data, function, map)
Parámetros:
- evento: Este parámetro es obligatorio. Especifica uno o más eventos o espacios de nombres para adjuntar a los elementos seleccionados.
En el caso de múltiples valores de eventos, estos están separados por espacios. El evento debe ser válido. - childSelector: este parámetro es opcional. Especifica que el controlador de eventos solo debe adjuntarse a los elementos secundarios definidos.
- datos: Este parámetro es opcional. Especifica datos adicionales para pasar a la función.
- función: Este parámetro es obligatorio. Especifica la función que se ejecutará cuando ocurra el evento.
- map: especifica un mapa de eventos ({event:func(), event:func(), …}) que tiene uno o más eventos para agregar a los elementos seleccionados y funciones para ejecutar cuando ocurren los eventos.
- evento: Este parámetro es obligatorio. Especifica uno o más eventos o espacios de nombres para adjuntar a los elementos seleccionados.
- Método jQuery remove()
Este método elimina los elementos seleccionados, incluido todo el texto y los Nodes secundarios junto con los datos y eventos de los elementos seleccionados.
Sintaxis:$(selector).remove(selector)
Parámetros:
- evento: Este parámetro es opcional. Especifica uno o más elementos a eliminar. Utilice la coma como separador para eliminar varios elementos.
Ejemplo 1: en este ejemplo, el elemento div se elimina después del efecto fadeOut durante 300 milisegundos.
<!DOCTYPE HTML>
<html>
<head>
<title>
JQuery
| How to FadeOut and Remove a div.
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<style>
#div {
height: 60px;
width: 200px;
background-color: green;
margin: 0 auto;
}
</style>
</head>
<body style="text-align:center;" id="body">
<h1 id="h" style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP"
style="font-size: 15px;
font-weight: bold;">
click the button to remove DIV with fade effect.
</p>
<div id="div">
</div>
<br>
<button>
click to remove
</button>
<p id="GFG_DOWN"
style="color:green;
font-size: 20px;
font-weight: bold;">
</p>
<script>
$('button').on('click', function(e) {
$('#div').fadeOut(300, function() {
$('#div').remove();
});
$("#GFG_DOWN").text("DIV Removed");
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: Este ejemplo es similar al anterior. En este ejemplo, el elemento div se elimina después del efecto fadeOut durante 300 milisegundos con un enfoque diferente.
<!DOCTYPE HTML>
<html>
<head>
<title>
JQuery
| How to FadeOut and Remove a div.
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<style>
#div {
height: 60px;
width: 200px;
background-color: green;
margin: 0 auto;
}
</style>
</head>
<body style="text-align:center;"
id="body">
<h1 id="h"
style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP"
style="font-size: 15px; font-weight: bold;">
click the button to remove DIV with fade effect.
</p>
<div id="div">
</div>
<br>
<button onclick='$("#div").fadeOut(300, function()
{ $(this).remove(); $("#GFG_DOWN")
.text("DIV Removed"); });'>
click to remove
</button>
<p id="GFG_DOWN"
style="color:green;
font-size: 20px;
font-weight: bold;">
</p>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA