Como para obter efeitos jQuery trabalhando no Firefox e Google Chrome?

Question

Eu estou bisbilhotando com jQuery e os efeitos FadeIn & fadeOut. Eu tenho o seguinte código para mostrar e ocultar uma div com uma mensagem.

`

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

`

Ele funciona perfeitamente no Internet Explorer, mas não faz nada em cromo e fico show e esconder comportamento no Firefox.

Existe uma etapa especial para esta biblioteca para o trabalho uniformemente ou pelo menos perto em todos os navegadores?

Answer 1

Tente fadeOut do retorno de chamada de fadeIn . Isso irá garantir que este último efeito é ran uma vez que o primeiro é completado, e não durante a:

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

jQuery deve trabalho quase o mesmo em todos os navegadores por si só. Se você está recebendo um comportamento estranho, você provavelmente está fazendo algo errado - não jQuery:)

Answer 2

One, verifique se você está usando a mais recente jQuery, e que o Javascript está habilitado em todos os seus browsers.

Em segundo lugar, tentar acorrentar o fadeIn e fadeOut convoca:

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

Answer 3

Aqui está o problema: $ ( "Botão")

Não há nenhum elemento como botão, se for uma classe, em seguida: $ ( 'Botão')

... e se é um id então: $ ( 'Botão #')