How can I animate the opacity of the background of a div?
First of all you need to set the property correctly
$('#test').animate({ 'background-color': 'rgba(0, 0, 0, 0.7)' },1000);
then you need to include jquery-ui to animate colours.
http://jsfiddle.net/7twXW/11/
You can also use css transitions to animate background colours
#test {
background-color: rgba(0, 0, 0, 0);
-webkit-transition:background-color 1s;
-moz-transition:background-color 1s;
transition:background-color 1s;
}
http://jsfiddle.net/7twXW/13/
Opacity Animation for background-image
Answer to your first question:
Put the background-image
on a pseudo element ::before
instead:
#InnerImage::before {
background: url('imgurl.com') no-repeat center left;
content: "";
position: absolute;
/* the following makes the pseudo element stretch to all sides of host element */
top: 0; right: 0; bottom: 0; left: 0;
z-index: 1;
}
This requires to set position: relative;
on #InnerImage
:
#InnerImage {
position: relative;
}
and you need to make sure all other child elements are above the pseudo element using z-index
(which only applies the way you need if you position those elements):
#InnerImage * {
position: relative;
z-index: 2;
}
Notice: #OuterImage #InnerImage
can be safely shortened to #InnerImage
since there may be only one element on a page with any given id
value anyway. Also I'd advise not to use id
selectors in CSS unless you know for sure why you are doing it.
Regarding your animation, it seems like you want it to start only after two seconds have gone by. This can be achieve using a transition
like this:
transition: opacity 1s ease 2s;
where 1s
is transition-duration
and 2s
is transition-delay
.
https://developer.mozilla.org/en/docs/Web/CSS/transition
Example:
#InnerImage::before { background: url(http://lorempixel.com/300/200) no-repeat center left; content: ""; position: absolute; /* the following makes the pseudo element stretch to all sides of host element */ top: 0; right: 0; bottom: 0; left: 0; transition: opacity 1s ease 2s; z-index: 1;}#InnerImage { position: relative; width: 300px; height: 200px;}#InnerImage * { position: relative; z-index: 2;}
#InnerImage:hover::before { opacity: 0.25;}
<div id="InnerImage"> <h2>Hey!</h2> <button>noop</button></div>
Is it possible to animate a DIV's background color opacity?
You can use multiple background. One for light orange and the other one for the dark orange by using a linear gradient. Then you change the size of the gradient so it goes above the light color when adding the active
class. Like that you will create the left to right opacity animation (you can also make it for right to left or even consider top/bottom).
Here is an example (hover on the element to see the color change.
.progress-bar-item { background: linear-gradient(to right,orange,orange) 0 0/0 100% no-repeat, rgba(255, 165, 0,0.1); height: 40px; width: 300px; float: left; margin-right: 10px; transition:.5s;}
.progress-bar-item:hover { background-size:100% 100%,auto;}
<div class="progress-bar-item"></div>
Changing div opacity one by one to make animation
This is after fixing your code:
@-webkit-keyframes dance {
from {
opacity: 1
}
to {
opacity: 0.1
}
}
li.block-1 {
animation: dance 1s infinite;
animation-delay: 222ms;
animation-direction: alternate;
}
Here is the JSFiddle demo
You can fine tune the value to your preference :)
How to animate background opacity without affecting content opacity (when hover)?
If the button just has a single background-color
, you can use rgba
to change the color opacity without affecting other properties. Sample:
button {
background-color: #f000;
color: #333;
transition: all .3s ease-in-out;
}
button:hover {
background-color: rgba(255, 0, 0, 0);
}
Pay attention to transition
timing and easing function for adjusting it to your own needs. Also, remember to add a -webkit-transition
prefixed version if you care about Androids before 4.4 (as shown by http://caniuse.com/#search=transition).
Related Topics
Bootstrap 3 Compatible with Current Angularjs Bootstrap Directives
How to Position a Bootstrap Popover
How to Make JavaScript Scrollintoview Smooth
Sticky Header Flickering on Safari Desktop Only When Anchor Scrolling
How to Force Jquery to Center an Element When It Is Dragged to and Snapped to Another Container
Get All CSS Styles for a Dom Element (A La Firebug)
How to Retrieve the Angle in CSS3 Rotate
Window.Getcomputedstyle Not Working for Shorthand Properties in Other Browsers Except Chrome
How to Style a Unicode Character
How to Get Display:Table-Cell Support in Ie? Any Pure JavaScript or Jquery Workaround
How to Change the Font Size in Jqgrid
Slow Response When the HTML Table Is Big
Change Iframe Src by Clicking a Link
Play Pause HTML5 Video JavaScript
Make a <Br> Instead of <Div></Div> by Pressing Enter on a Contenteditable