CODEWITHSUNDEEP
javascriptjquerycss
Mantissa
Mantissa

Reputation: 91

asynchronous use of .css jquery

Hey I was wondering if anyone could help me with some basic javascript. Is it possible to use the jquery .css to use asynchronous callbacks to stagger changes to css?

E.g. 

 jQuery("#topbar").css({transition: "background-color 10s ease", background: "rgba(255, 255, 255, 0.6)"});
            //jQuery("#topbar").css({transition: "background-color 10s ease", background: "rgba(255, 255, 255, 0.0)"});

In this example can I alter the first function to become asysnchronous so that it runs the second commented function in a callback function?

Thanks

Upvotes: 0

Views: 381

Answers (1)

trentmwillis
trentmwillis

Reputation: 671

Option #1

Use pure CSS3 instead. Look into using CSS animations rather than queueing them up with Javascript. It is kind of pointless with modern browsers. See MDN and W3C.

Option #2

You'll have to set a timeout to delay the execution of the second jQuery line. Like so:

jQuery("#topbar").css({transition: "background-color 10s ease", background: "rgba(255, 255, 255, 0.6)"});

setTimeout(function() {
    jQuery("#topbar").css({
        background: "rgba(255, 255, 255, 0.0)"}
    );
}, 10000);

Now if you want them to loop you'll have to set up a recursive relation between the two functions. Hope this helps!

Upvotes: 1

Related Questions