asynchronous use of .css jquery

Question

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

I understood what you want, but the way you put it is kind of confusing. You don't use the jquery .css, you apply styles/transitions at runtime with jQuery — cr0ss
– cr0ss, Commented Jun 6, 2014 at 16:39
That's not what asynchronous means. Asynchronous means that one thing does not have to wait for another -- that their run times are not synchronized. You want the opposite. — Sam Hanley
– Sam Hanley, Commented Jun 6, 2014 at 16:39
Can you more clearly explain what you want to happen visually. — Popnoodles
– Popnoodles, Commented Jun 6, 2014 at 16:41
Just wanted to get a flash in flash out effect. My experience with asynchronous programming is that the only way to ensure sequential logic is through callbacks. Even loops must use callbacks. More like recursion I suppose. .animate() is probably the best option just have v limited front-end experience. — Mantissa
– Mantissa, Commented Jun 6, 2014 at 17:10

trentmwillis · Accepted Answer · 2014-06-06 16:49:50Z

1

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!

answered Jun 6, 2014 at 16:49

trentmwillis

6714 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

trentmwillis Over a year ago

True! Oversight on my part

Popnoodles Over a year ago

There are options three and four - use $.queue or $.animate so that it can be $.dequeued or $.stopped easily.

Mantissa Over a year ago

Worked a treat. I'll look into CSS animations.

kalley Over a year ago

You can also listen for transitionend (webkitTransitionEnd is the only prefixed one you'll need) events and chain them that way as well.

Collectives™ on Stack Overflow

asynchronous use of .css jquery

1 Answer 1

Option #1

Option #2

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Option #1

Option #2

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related