¿Cómo hacer que los efectos jQuery funcionen en Firefox y Google Chrome?

Question

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?

Answer 1

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 :)

Answer 2

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);
});

Answer 3

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')