CODEWITHSUNDEEP
jqueryinternet-explorerfirefoxgoogle-chromeeffects
Raúl Roa
Raúl Roa

Reputation: 12386

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

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?

Upvotes: 1

Views: 4565

Answers (3)

chris
chris

Reputation: 1

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

Upvotes: 0

Sampson
Sampson

Reputation: 268344

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

Upvotes: 7

strager
strager

Reputation: 90012

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

Upvotes: 0

Related Questions