Develop Reference

Make div visible by fading it in

When the page loads, I have hidden a div using
#hidDiv{
visibility: hidden;
}
I use jQuery to make it visible.
$('#hidDiv').css('visibility', 'visible');
My question is how do I make it fade in gently instead of appearing quickly?
Note: It's important that visibility: hidden; should be maintained. E.g. can not use hide(); instead of visibility: hidden;

If you don't want to use JQuery,
html:
<div id="theElement" class="hide"></div>
css:
.hide {
opacity: 0;
transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
}
.show {
opacity: 1;
transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
}
*1s is the number of seconds to fade for. Make sure you change all of them.
You can then just change the class with javascript:
document.getElementById('theElement').className = 'show'; // Fade in
document.getElementById('theElement').className = 'hide'; // Fade out
More Reading:
Simple documentation from W3Schools
More thorough documentation from MDN
Compatibility info from caniuse.com

Use jQuery fadeIn()
$('div').fadeIn();
Otherwise, if visibility must be maintained, do
$('div').css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, 'slow');
$('div').css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, 'slow');
div{
width:100px;
height:100px;
background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div></div>
See Want to use jquery fade in effects, but want to use visibility:hidden initially

As AmmarCSE has stated, if you are using jQuery you can use $("div").fadeIn(); for more control you can also set a timeframe using fadeIn's first argument. ie
$("div").fadeIn("slow");.
This first argument can be one of the built in time values of "fast" or "slow" etc or it can be a time in milliseconds ie
$("div").fadeIn(1000);
The function also has a callback in case you want to do something once the element has finished fading in. It can be used like so...
$("div").fadeIn("slow",function(){
console.log("finished fading in");
});
You can also use fadeOut() in the same manner to fade the div back out... $("div").fadeOut("slow");
The docs on fadeIn() can be found here -> http://api.jquery.com/fadein/
Another option would be to use jQuery's animate() function on the elements opacity. Ie.
$("div").animate({
opacity:0
},"slow");
This is useful if you also want to animate other properties of the element at the same time. ie.
$("div").animate({
opacity:0,
left:200
},"slow");
The docs for animate() can be found here -> http://api.jquery.com/animate/
Another option would to use css transitions like so...
div {
opacity:0;
transition:opacity 1s;
-webkit-transition:opacity 1s;
-moz-transition:opacity:1s;
}
div.fadeIn {
opacity:1;
}
And then use jquery to add or remove the fadeIn class to trigger the fading ie.
$("body").on("click",function(){
$("div").toggleClass("fadeIn");
});
This will fade the div in or out on click of the body.
More info on transitions here -> http://www.w3schools.com/css/css3_transitions.asp
You could also use css animations but I wont go into that here. Hope the extra info helps someone.

Don't dim slide content when not active

I am using impress.js for the first time and wanted to make a tweak. The original demo SEEN HERE has the slides become dim/transparent when they are not active. I have seen another impress.js presentation SEEN HERE where the image/slides remain opaque throughout the presentation except on the first slide (after that everything become opaque). How can I make a particular slide or image stay opaque through out the presentation?

in your css adding
.future : { opacity: 1.0 !important;}
.past : { opacity: 1.0 !important;}
or editing impress-demo.css
.impress-enabled .step {
margin: 0;
opacity: 0.3; <--- CHANGE THIS
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
will change the opacity for different steps
Anyway, you can find the elements ,and choose the one u want and make a .css with jquery, for example:
$("body").find(".future")[0].css("opacity","1.0"); <-- This will change just the first future step found
Anyway, please read about css rules and specificity:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Hope it helps
EDIT
I though u may also want to use :firs-child or :after (CSS selectors) will can also help you: http://quirksmode.org/css/selectors/firstchild.html
http://www.w3schools.com/cssref/sel_after.asp

Animate background image to another - CSS/JQuery [duplicate]

This question already has answers here:
Animate background image change with jQuery
(9 answers)
Closed 8 years ago.
My HEADER element has a background image and I need to swap it to another image after a 3 second delay, I have looked all over the internet and I cannot find a solution! I have tried CSS3 and Jquery and I just cant get it to work.
Because of the way the website is built, it has to be the background image of the element that changes and not a nested Div within the HEADER element.
--- SOLVED / SOLUTION ---
JS
$(document).ready(function() {
$("header").delay(5000).queue(function() {
$(this).css({
"background-image": "url(<?php bloginfo('template_url') ?>/img/header-boy-hover.jpg)"
});
});
});
CSS
header {
-webkit-transition:all 1s ease-in;
-moz-transition:all 1s ease-in;
-o-transition:all 1s ease-in;
-ms-transition:all 1s ease-in;
transition:all 1s ease-in;
}

A similar question has been asked before - This should give you an answer
Change CSS background-image with different intervals via jQuery

How can I add a time delay to my divs, so they appear one after the other like a powerpoint slide? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
So say I want div 1 to appear after 2 seconds, div 2 to appear after 7 seconds, and div 3 to appear after 15 seconds.
Is there a way for me to add an inline style element that will make the divs go from hidden but occupying space to fully visible.
I've been searching and most things I've found are hover/click triggered. I can't seem to find anything with a time trigger.
Thank you.
Edit: To make this more clear, I am looking for any kind of code that has a time delay to appear. When I search transition, I get a bunch of code based on actions, like a click or a hover. I am not looking for a user action to trigger this, just a time.
When I search for animation, I get a bunch of results about moving images, which I also do not need.
When I search for time delay, I get a bunch of results about time delay transitions, which is how long after the user action occurs does the transition occur which still requires user input, and I do not want user input.
I am more asking what I should be looking for, if there is a word for it or something you are familiar that does this. I didn't provide any code because I don't want you coding me something. I'm asking for lead, because it is frustrating that I cannot find the proper word to identify what I need.

you can either use a css transition to animate the visibility property after a set delay in your stylesheet, or you can change the visibility property using JS and setTimeout();
HTML
<div id="div1" style="visibility:hidden;"></div>
JS
setTimeout(function(){
document.getElementById('div1').style.visibility = "visible";
},1000);
This sets a callback to override the css property after 1000 ms, or 1 second.
For a pure css solution we can use this instead. We need to provide multiples of a few properties, for cross platform compatibility.
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
So this class called fade-in adds a 1s animation to any element it's added to, it will start as soon as it's loaded as it is. It's opacity based so the object will take up space when it's invisible, if you don't want this you need to use a variation on display:none.
A delay can be added to an element using
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
Just set that with a different value for each 'slide' to get them to fade in at different times.

If you want the space taken up - meaning you don't want things collapsed up, I would create the div, and set it's display to none, and then the opacity to 0. This will hide the element, but it will still take up physical space on your page.
Then I would create a css class called "show" or something like that:
CSS:
.show {
opacity: 1;
transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
}
Then with jQuery (or javascript) you could use either setInterval, or setTimeOut. In your timeout function, you could dynamiclly assign the "show" class to each element. This would fade each element in after "x" seconds you specify.
Something like this:
jQuery:
$(function() {
setTimeout(function(){
showElement();
}, 3000);
function showElement() {
$('my-div').toggleClass('show');
}
});

How to use CSS3 transitions

I have the following HTML:
<div id="welcome-content">
// Code
</div>
<div id="configure-content" style="display:none">
// Code
</div>
And (working) jquery that toggles between them:
$('.back-welcome').click(function(){
$('#welcome-content').toggle();
$('#configure-content').toggle();
});
I want to use CSS3 to create a fade effect as I toggle between them. I have tried the following:
#welcome-content, #configure-content{
-webkit-transition: all 400ms;
-o-transition: all 400ms;
-moz-transition: all 400ms;
-ms-transition: all 400ms;
-khtml-transition: all 400ms;
}
However, no animation takes place. What am I doing wrong?

The property display that assign the method toggle () can't be animated with the CSS transitions. Maybe you want to look at fadeIn() and fadeOut().
Edit
I've found this another method fadeToggle() i don't know much about it but you can search and use this:
$('.back-fade').click(function(){
$('#welcome-content').fadeToggle(2000);
$('#configure-content').fadeToggle(2000);
});
Check this demo http://jsfiddle.net/8urRp/14/ *
*I made the divs with absolute position to keep them on the same space

There can only be a transition for a CSS property from one value to another. For a fade transition, the opacity should go from 0 to one.
CSS
.foo {
opacity: 0;
transition: all 400ms;
}
.foo.active {
opacity: 1
}
JavaScript
$('.mybtn').click(function() { $('.foo').toggleClass('active'); })
See this fiddle
Now there is an annoying thing with showing an hiding elements using with CSS transitions. The transition from display: none to display: block is instant, canceling out all other transitions.
There are several ways around this. First you can just use the jQuery fadeOut function. If you do really insist in using CSS transitions have a look at this answer.