Jquery + CSS default BG color

Question

I have a div with a css style of say green or blue, depending on the nth child color. I set it to orange using

<div id='yo' class='alternatingcolors' style='background-color: #FF9900;'>hello</div>

and I want to animate it back to its original color using jquery's

$('yo').animate({ backgroundColor: 'transparent'}, 500);

However, neither transparent, inherit, null, or '' work.

How would I get it back to its original color? Essentially I want to animate it to the state before: style='background-color: #FF9900;' was set.

gak · Accepted Answer · 2012-04-12 05:22:05Z

1

The lookup to 'yo' should be prefixed with a hash, e.g.:

$('#yo')

If that's not the issue:

You could store the original colour as data in the div, then restore it later:

<div id='yo' data-original-color='#FF9900' class='alternatingcolors'>

then:

$('#yo').animate({ backgroundColor: $('#yo').data('original-color') }, 500);

answered Apr 12, 2012 at 5:22

gak

33k30 gold badges127 silver badges158 bronze badges

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

2 Comments

Air In Over a year ago

Woops, forgot the hash (typed it, not copy pasted). Is there any way to do it without storing it?

gak Over a year ago

As far as I'm aware, once you change a property (e.g. background-color) of an element, it is kept that way and there is no handy reference to the original.

Ram · Accepted Answer · 2012-04-12 05:24:51Z

0

you can save its first background-color into a variable and then use it:

orange = $("yo").css("background-color")

answered Apr 12, 2012 at 5:24

Ram

145k16 gold badges174 silver badges201 bronze badges

Collectives™ on Stack Overflow

Jquery + CSS default BG color

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related