Come far funzionare gli effetti jQuery su Firefox e Google Chrome?

Question

Sto frugando con jQuery e il fadeIn & amp; effetti di dissolvenza. Ho il seguente codice per visualizzare e nascondere un div con un messaggio.

`

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

`

Funziona perfettamente su Internet Explorer, ma non fa nulla in Chrome e ho il comportamento di mostrare e nascondere in Firefox.

Esiste un passaggio speciale affinché questa libreria funzioni in modo uniforme o almeno vicino in tutti i browser?

Answer 1

Prova fadeOut dal callback di fadeIn . Ciò garantirà che quest'ultimo effetto venga eseguito una volta completato il primo e non durante:

$(document).ready(function(){
  $("button").click(function(){
    $("#upd").fadeIn(3000,function(){
      $(this).fadeOut(2500);
    });
  });
});

jQuery dovrebbe funzionare quasi allo stesso modo in tutti i browser da solo. Se stai assumendo comportamenti strani, probabilmente stai facendo qualcosa di sbagliato - non jQuery :)

Answer 2

Uno, assicurati di utilizzare l'ultima jQuery e che Javascript sia abilitato in tutti i tuoi browser.

In secondo luogo, prova a concatenare le chiamate fadeIn e fadeOut :

$("button").click(function() {
    $("#upd")
        .fadeIn(3000)
        .fadeOut(20000);
});

Answer 3

Ecco il problema: (; Tasto " ") $

Non esiste alcun elemento come il pulsante, se è una classe quindi: $ ('. pulsante')

... e se è un id allora: $ ( '# Tasto')