Comment faire fonctionner les effets jQuery sur Firefox et Google Chrome?

Question

Je fouille avec jQuery et le fadeIn & amp; effets fadeOut. J'ai le code suivant pour afficher et masquer une div avec un message.

`

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

`

Cela fonctionne parfaitement sous Internet Explorer, mais il ne fait rien en chrome et j'obtiens un comportement d'affichage et de masquage dans Firefox.

Existe-t-il une étape spéciale pour que cette bibliothèque fonctionne uniformément ou du moins dans tous les navigateurs?

Answer 1

Essayez fadeOut du rappel de fadeIn . Cela garantira que ce dernier effet sera exécuté une fois le premier terminé, et non pendant:

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

jQuery devrait fonctionner pratiquement de la même manière dans tous les navigateurs. Si vous obtenez un comportement étrange, vous faites probablement quelque chose de mal - pas jQuery:)

Answer 2

Premièrement, assurez-vous que vous utilisez la dernière version de jQuery et que Javascript est activé dans tous vos navigateurs.

Deuxièmement, essayez de chaîner les appels fadeIn et fadeOut :

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

Answer 3

Voici le problème: $ (" bouton ")

Il n'y a pas d'élément comme button, s'il s'agit d'une classe, alors: $ ('. bouton')

... et s'il s'agit d'un identifiant, alors: $ ('bouton #')