¿Cómo hacer que los efectos jQuery funcionen en Firefox y Google Chrome?
-
19-08-2019 - |
Pregunta
Estoy hurgando con jQuery y el fadeIn & amp; efectos de desvanecimiento. Tengo el siguiente código para mostrar y ocultar un div con un mensaje.
`
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("#upd").fadeIn(3000);
$("#upd").fadeOut(20000);
});
});
</script>
<style type="text/css">
div
{
background: rgb(237, 243, 254);
margin: 0px 0px 5px 0px;
padding: 13px 30px 13px 30px;
width: 300px;
}
</style>
`
Funciona perfectamente en Internet Explorer, pero no hace nada en Chrome y obtengo el comportamiento de mostrar y ocultar en Firefox.
¿Hay un paso especial para que esta biblioteca funcione de manera uniforme o al menos cerca de todos los navegadores?
Solución
Pruebe fadeOut desde la devolución de llamada de fadeIn . Esto asegurará que el último efecto se ejecute una vez que se complete el primero, y no durante:
$(document).ready(function(){
$("button").click(function(){
$("#upd").fadeIn(3000,function(){
$(this).fadeOut(2500);
});
});
});
jQuery debería funcionar casi igual en todos los navegadores por sí solo. Si tiene un comportamiento extraño, es probable que esté haciendo algo mal, no jQuery :)
Otros consejos
Primero, asegúrese de estar utilizando la última versión de jQuery y de que Javascript esté habilitado en todos sus navegadores.
Segundo, intente encadenar las llamadas fadeIn
y fadeOut
juntas:
$("button").click(function() {
$("#upd")
.fadeIn(3000)
.fadeOut(20000);
});
Aquí está el problema: $ (" botón ")
No hay elemento como botón, si es una clase, entonces: $ ('. button')
... y si es una identificación, entonces: $ ('# botón')