How to get jQuery effects working on Firefox and Google Chrome?

Question

I'm poking around with jQuery and the fadeIn & fadeOut effects. I have the following code to display and to hide a div with a 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>

`

It works perfectly on Internet Explorer, but it doesn't do anything in chrome and I get show and hide behavior in firefox.

Is there a special step for this library to work evenly or at least close to in all the browsers?

Answer 1

Try fadeOut from the callback of fadeIn. This will ensure that the latter effect is ran once the first is completed, and not during:

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

jQuery should work nearly the same in all browsers by itself. If you're getting strange behavior, you're likely doing something wrong - not jQuery :)

Answer 2

One, make sure you're using the latest jQuery, and that Javascript is enabled in all your browsers.

Second, try chaining the fadeIn and fadeOut calls together:

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

Answer 3

Here is the Problem: $("button")

There is no element like button, if it is a class then: $('.button')

... and if it is an id then: $('#button')