We Keep Coding

Transitions on the CSS Opacity Property

I'm currently designing a CSS text fade-in so it fades the next line of text after a few seconds - basically a regular CSS-only opacity transition, but one that also includes an embedded iframe.
At the moment, it appears that CSS 3 opacity does not apply to the 'iframe' property, i.e., you can't add an iframe before the closing 'div' or add 'iframe' to the opacity (or any combination).
Is there a way to allow the text to fade in then time the appearance of the 'iframe' youtube video followed by the third piece of text on a page?
I'm aware that you can use transitions on the visibility: property, but I can't think of a way to use that effectively.
I was able to do this with JQuery but that requires a special function just for the iframe video. Anything else just failed miserably.
I wanted to challenge myself to use just CSS, and I think I'm coming up a little short.
<style>
#fade p iframe {
margin-top: 25px;
text-align: center;
animation: fadein 20s;
-moz-animation: fadein 20s; /* Firefox */
-webkit-animation: fadein 20s; /* Safari and Chrome */
-o-animation: fadein 20s; /* Opera */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
</style>
<div id="fade">
<p>lorem ipsum factorum
<iframe src="..."></iframe>
</p>
</div>
The code above works fine for TEXT ONLY. The opacity fades in over time, but the desired effect would be that the text fades in first, followed by the video (or at the same time) below the fading text.

Simple fadein not running smooth

I am a beginner in jQuery and JS and I wanted to make a simple fade in animation using the following code. Unfortunately the code is not running smooth, and despite reading up all the basics (at least I suppose so) I cannot get it to run smoothly. Can anyone point me in the correct direction on how to make a smooth fade in animation?
All my elements are visible in the beginning. I don't want to start with hidden elements as this could result in problems in my UI if there is no JS enabled.
Thank you.
$(function () {
$("#center_block").animate(
{
opacity: 0,
}, 0, function () {
$("#center_block").animate({
opacity: 1,
}, 250);
});
});

If you have a slow processor on your computer or if you are viewing javascript animations a mobile device the processor might not be able to cope with the animation. If you use CSS3 animations then the inbuilt browsers hardware acceleration is used, which is a lot more efficient.
All I am doing is using CSS3 animation to apply the fade.
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity:1;
}
}
#center_block {
animation: 1s ease-out fadeIn;
}
<div id="center_block">Look at me, I'm Mr Center Block</div>

There really is no need for JavaScript at all here. CSS animations can do this more easily with better performance (because they will leverage GPU hardware acceleration):
span {
font-size:3em;
font-weight:bold;
font-family:Arial;
border:1px solid grey;
background-color:aliceblue;
display:inline-block;
padding:10px;
opacity:0;
/* Configure the element to use the animation */
animation: 3s infinite fade;
}
#keyframes fade {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
<span>Hello</span>
Or, if you don't want the animation to be automatic and have some sort of trigger, then just add a CSS class to the object at the right time:
document.querySelector("button").addEventListener("click", function(){
document.querySelector("span").classList.add("animate");
});
span {
font-size:3em;
font-weight:bold;
font-family:Arial;
border:1px solid grey;
background-color:aliceblue;
display:inline-block;
padding:10px;
opacity:0;
}
.animate {
/* Configure the element to use the animation */
animation: 3s infinite fade;
}
#keyframes fade {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
<button>Click to Start</button>
<span>Hello</span>

I would advise using CSS animations as much as possible for the smoothest performance. A great library to get you started is animate.css. To use it, include the css library in your project and use javascript to add predefined classes to your components. In your case:
$('#center_block').addClass('animated fadeIn');
would fade in the #center_block element nicely.

If you don't want to hide the elements incase JS is disabled, then you need to hide them first using JS. Also, you're currently using 250ms, which is incredibly fast, and unlikely to be perceived by users.
$(document).on('ready', function(){
$('#center_block').hide().fadeIn(250);
});
If your elements already have opacity: 0; for the CSS, then you can add a transition to handle the animation:
#center_block{
opacity: 0;
transition: all .25s linear;
}
Then change the CSS value of opacity whenever the triggering condition is met:
$('#center_block').css('opacity','1');

easeInOutQuad with a fade in

I have searched for a couple hours now and cant seem to find the correct solution to this. I need to fade in a background image after its loaded. The loading and fadeIn() works with the code i have pasted but it is choppy. So i want to use easeInOutQuad with fadeIn() to see if its smoother. (the reason it is choppy is because there is other script at work doing other things at the same time).I tried this:
$(".wings-wrapper").fadeIn(2000, 'easeInOutQuad', function(){});
But it did not work .
var backgroundImage = $(currentWing).data("background-url");
var bgimage = new Image();
bgimage.src = backgroundImage;
$(bgimage).load(function(){
$(".wings-wrapper").css("background-image","url("+$(this).attr("src")+")").fadeIn(1000);
});

It seems you are looking to load an image with fade-in effect.
You may do this either with javascript or with CSS
Javascript:
Simply hide the image once loaded and use fadeIn() to make it appear again with a fade effect.
$(".jsfade").hide(0).delay(500).fadeIn(3000)
Where .jsfade is the class attached to an image
CSS:
You can also use CSS animations to change the opacity of the image to create a fadeIn effect. For an image with .fade class,
<img src="image.jpg" class="fade" />
You can define the css classes as follows
.fade {
opacity: 1;
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
.fade:hover {
opacity: 0.5;
}
UPDATE:
jQuery UI specifies the following signature for show/hide/fadeIn functions
.show( [duration,] [easing,] [callback] )
Having said that, following is the code with different easing options
$(".jsfade").fadeIn(3000, 'linear') //WITH LINEAR AS EASING OPTION
$(".jsfadeEaseinOutQuad").fadeIn(3000,'easeInOutQuad') //with easeInOutQuad as the easing option.
So, the reason why $(".wings-wrapper").fadeIn(2000, 'easeInOutQuad', function(){}); doesnt seem to work is because your content is probably already visible and hence fadeIn() will essentially do nothing. To See the effect, you need to hide the elements first and then apply the fadeIn().
Use the css property display:none to hide .wings-wrapper
Here's the UPDATED plunkr with both approaches.

Fading in via CSS transition doesn't work properly

I'm trying to animate a page element using CSS transition on opacity property. Fading out works properly, but Fading in doesn't. What am I doing wrong?
Some facts are really strange:
Without using .no-display class everything works as expected (but I should use it).
Replaying function's commands in browser console does work as expected (but function does not).
The code:
HTML
<p>Fade in</p>
<p>Fade out</p>
<div class="no-display invisible" id="square"></div>
CSS
.no-display {
display: none;
}
.invisible {
opacity: 0;
}
#square {
width: 500px;
height: 500px;
background-color: red;
border: 1px solid black;
-webkit-transition: opacity 2s ease;
-moz-transition: opacity 2s ease;
-ms-transition: opacity 2s ease;
-o-transition: opacity 2s ease;
transition: opacity 2s ease;
}
JavaScript
function fadeIn() {
square.classList.remove("no-display");
square.classList.remove("invisible");
}
function fadeOut() {
square.classList.add("invisible");
setTimeout(function() { square.classList.add("no-display"); }, 2000 );
}
Or: http://jsfiddle.net/V2Sar/6/.
Note, I can't use any frameworks such as jQuery. I have to work only with pure JavaScript.

The easy way to trigger CSS transitions with JS is to toggle classnames, and the easy way to do that is through the classList API.
js
var square = document.getElementById("square");
function fadeIn() {
square.classList.remove("invisible");
}
function fadeOut() {
square.classList.add("invisible");
}
css
#square {
opacity: 1;
transition: opacity 2s ease;
}
#square.invisible {
opacity: 0;
}
http://jsfiddle.net/V2Sar/5/
Also, make sure your scripts are at the end of the <body> so you don't need to worry about whether the DOM is constructed yet (separate option in jsfiddle for this).
The browser support isn't great (no support in IE9) but there is a shim available at https://github.com/eligrey/classList.js
Let me know if this isn't good enough for you and I'll post some alternatives as well.

The only problem is "display: none;". Simply replace it with 'visibility: hidden'.
The reason is that 'display: none' doesn't build the resulting element in the DOM. As such, it cannot fade in something that does not exist. When its created, its created in a visible way.
'visibility: hidden', however, does build the resulting element in the DOM, simply doesn't show it. Because it exists, it can fade in when required.

how to change div background-color with fadeIn/Out?

How to change div background-color with fadeIn/Out,I only want to fade background color,not background image,Please give me some useful code or solution

Although only supported by modern browsers you might also consider using CSS transitions to achieve the same effect
HTML
<div class='foobar'></div>
CSS
.foobar {
/* transition properties */
transition: background-color 2s;
-moz-transition: background-color 2s;
-webkit-transition: background-color 2s;
-o-transition: background-color 2s;
/* basic styling & initial background-color */
background-color:maroon;
width:100px;
height:100px;
}
/* Change background color on mouse over */
.foobar:hover {
background-color:blue;
}
Working example here, http://jsfiddle.net/eRW57/14/

<script>
$(document).ready(function(){
$("p").toggle(function(){
$("body").css("background-color","green");},
function(){
$("body").css("background-color","red");},
function(){
$("body").css("background-color","yellow");}
);
});
</script>
try it.. that should work fine

You can't fade just the background (color or otherwise) of an element using jQuery's fadeIn/fadeOut.
What you can do is place an additional layer (DIV, etc) with your background color and fade in/out on that.
Instead of something like this:
<div id="my-background"></div>
Use this structure:
<div id="container">
<div id="my-background"></div>
</div>
CSS
#container
{
position:relative;
width:200px;
height:100px;
background-image:url(my-background-image.jpg);
}
#my-background
{
height:100%;
width:100%;
background-color:blue;
position:absolute;
z-index:99;
}
Then use jQuery's fadeIn/fadeOut methods
JS
jQuery("#my-background").fadeOut();

with this you can fadeout all div's with id #my-background
var $div = $('#my-background');
$div.each(function blank(){
$(this).animate({'backgroundColor': '#fff'},2000);
});