Develop Reference

CSS transition of a div does not animate

When I click a div, I want a second div to expand/collapse. That is done using JS, HTML, and CSS. Now I want the CSS transition to animate.
Right now all I get is a jumping expansion and either a scroll (Edge) or a jump after a wait (Chrome, Opera, Firefox).
I've tried to set height to 1px instead of 0px, but that doesn't change anything.
function growDiv(id) {
var ele = document.getElementById(id);
if (ele.style.height == '100%') {
ele.style.height = '0px';
} else {
ele.style.height = '100%';
}
}
.main {
font-weight: 700;
overflow: hidden;
cursor: pointer;
}
.secondary {
-webkit-transition: height .5s ease;
-moz-transition: height .5s ease;
-ms-transition: height .5s ease;
-o-transition: height .5s ease;
transition: height .5s ease;
overflow: hidden;
padding-left: 20px;
height: 0px;
cursor: pointer;
}
<div class="main" onclick="growDiv('expandable')">
Expand
</div>
<div class="secondary" id="expandable" onclick="growDiv('expandable')">
number1,
<br>number2,
<br>number3,
<br>number4.
</div>
Codepen behaves as I know the full site does, so for good measure; here's the codepen: http://codepen.io/anon/pen/ezJQjM

From http://css3.bradshawenterprises.com/animating_height/
Instead of using 100%, just "let it" get the auto value by not restraining it.
NOTE: 100px is just "any number bigger than the actual size"
function growDiv(id) {
var ele = document.getElementById(id);
if (ele.style.maxHeight != '0vh') {
ele.style.maxHeight = '0vh';
} else {
ele.style.maxHeight = "100vh";
}
}
.main {
font-weight: 700;
overflow: hidden;
cursor: pointer;
}
.secondary {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
overflow: hidden;
padding-left: 20px;
cursor: pointer;
}
<div class="main" onclick="growDiv('expandable')">
Expand
</div>
<div class="secondary" id="expandable" onclick="growDiv('expandable')" style="max-height: 0vh;">
number1,
<br>number2,
<br>number3,
<br>number4.
</div>
EDIT: Changed everything to VH (viewport height) so it will never grow bigger than 100% of the screen height and will adapt to the max height of any screen.
Also switched the "style="max-height: 0vh;" to the element itself instead of the class, so you could be unsetting it with ele.style if needed (otherwise you will need to set a new value to override the class.

Are you willing to use jQuery? It offers some cool animation possibilities, and may accomplish what you are trying to do. This is just a possible alternative to your approach.
Check out my fiddle here:
https://jsfiddle.net/3mo28z1t/11/
<div class="main" id="clicker">
Expand
</div>
<div class="secondary" id="expandable">
number1, <br> number2, <br> number3, <br> number4.
</div>
<script>
$( document ).ready(function() {
$(".secondary").hide();
$(document).ready(
function(){
$("#clicker").click(function () {
$(".secondary").toggle("slow");
});
});
});
</script>

The problem is caused by switching units of measure, so from pixels to percent. I would probable do it a little differently though.
growDiv = function(id) {
document.getElementById(id).classList.toggle('expanded');
}
.main {
font-weight: 700;
overflow: hidden;
cursor: pointer;
}
.secondary {
transition: max-height .5s ease;
overflow: hidden;
padding-left: 20px;
max-height: 0;
cursor: pointer;
}
.secondary.expanded {
height: 100%;
max-height: 100px;
}
<div class="main" onclick="growDiv('expandable')">
Expand
</div>
<div class="secondary" id="expandable" onclick="growDiv('expandable')">
number1,
<br>number2,
<br>number3,
<br>number4.
</div>
You'll notice the JS is a bit simpler, and it relies more on the CSS.

Sliding div's and stacking them (JavaScript)

I'm in the middle of making my website and I got a little road bump. This is how my code looks right now, and what I want to do is have the "About" box right below the "Home" box and have the above box slide down with the description that comes when you click the "Home" box. How may I do that?
This is the code to my JS file.
$(document).ready(function (event) {
var clicked=false;
$(".one").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"top": -40}); //Slides upwards 40pixels
}
else
{
clicked=true;
$(".two").css({"top": 0}); //Slides righ under "one"
}
});
var clicked2=false;
$(".three").on('click', function(){
if(clicked2)
{
clicked2=false;
$(".four").css({"top": -100}); //Slides upwards 40pixels
}
else
{
clicked2=true;
$(".four").css({"top": 0}); //Slides righ under "one"
}
});
});
On a complete side note, how could I get the boxes to start from the top of the page and how could I make he box be a huge box rater than a tiny strip of color?

you can try this one:
.container {
overflow:hidden;
}
.one {
position: relative;
top: 0;
background-color: #FFC300;
z-index: 1;
cursor:pointer;
}
.two {
position: relative;
top: -40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
.three{
position: relative;
top: 0;
background-color: #E9A1B9;
z-index: 1;
cursor:pointer;
}
.four {
position: relative;
top: -18px;
background-color: #02C9C9;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
DEMO HERE

I would use a negative margins and toggle a simple .open class on the .one and .three divs :
$(".one, .three").click(function(){
$(this).toggleClass('open');
});
CSS :
.one, .three {
margin-bottom: -40px;
-webkit-transition: margin-bottom 1s;
-moz-transition: margin-bottom 1s;
-o-transition: margin-bottom 1s;
transition: margin-bottom 1s;
}
.open {margin-bottom: 0}
jsFiddle demo

You can simplify this a bit by using the jQuery toggle() function to do the work for you. (edit: you could also use slideToggle() for a different effect)
$(selector).toggle(speed,callback);
The optional speed parameter can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after toggle() completes.
html
<div class="container">
<div class="one">Main</div>
<div class="two" style="display: none">Welcome to my page!</div>
<div class="three">About</div>
<div class="four" style="display: none">All about me</div>
</div>
css
.one {
background-color: #FFC300;
cursor:pointer;
}
.two {
background-color: yellow;
}
.three{
background-color: #E9A1B9;
cursor:pointer;
}
.four {
background-color: #02C9C9;
}
js
$(document).ready(function (event) {
$(".one").on('click', function(){
$(".two").toggle("slow");
});
$(".three").on('click', function(){
$(".four").toggle("slow");
});
});
DEMO:
https://jsfiddle.net/qbuatjrm/4/

Javascript Fade Into New Image When Clicked

Right now I have a code to switch between two images when clicking text, but I'd like to create a function where I can click on the image itself and it fades into the next one, and be able to do this with more than two images. Also the images I want to use vary in width and height, but all have a max height and width of 600px. Here's my current code:
HTML:
<div id="cf2" class="shadow">
<img class="bottom" src="/images/Cirques.jpg" />
<img class="top" src="/images/Clown%20Fish.jpg" />
</div>
<p id="cf_onclick">Click me to toggle</p>
CSS:
#cf2 {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf2 img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf2 img.transparent {
opacity:0;
}
#cf_onclick {
cursor:pointer;
}
JavaScript:
$(document).ready(function() {
$("#cf_onclick").click(function() {
$("#cf2 img.top").toggleClass("transparent");
});
});

Try adding #cf2 img to selector initiating click event
$("#cf_onclick, #cf2 img")
$(document).ready(function() {
var n = -1
, imgs = $("#cf2 img")
, fx = function(i, el) {
return (el || imgs.eq(i)).fadeToggle(1000);
};
$("#cf_onclick, #cf2 img").click(function() {
if (n === (-imgs.length)) {
fx(n);
n = -1;
fx(null, imgs);
} else {
fx(n);
--n
};
});
});
#cf2 {
position: relative;
height: 281px;
width: 450px;
margin: 0 auto;
}
#cf2 img {
position: absolute;
left: 0;
}
#cf_onclick {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="cf2" class="shadow">
<img class="bottom" src="http://lorempixel.com/400/400/cats" />
<img class="top" src="http://lorempixel.com/400/400/technics" />
<img class="top" src="http://lorempixel.com/400/400/nature" />
<img class="top" src="http://lorempixel.com/400/400/animals" />
</div>
<p id="cf_onclick">Click me to toggle</p>

This will work for multiple images:
$(document).ready(function() {
$.fn.nextOrFirst = function (selector) {
var next = this.next(selector);
return (next.length) ? next : this.prevAll(selector).last();
};
$("#cf2 img").click(function() {
$(this)
.removeClass('visible')
.nextOrFirst()
.addClass('visible');
});
});
#cf2 {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf2 img {
position:absolute;
left:0;
max-height: 600px;
max-width: 600px;
opacity: 0;
z-index: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf2 img.visible {
opacity: 1;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cf2" class="shadow">
<img class="visible" src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" alt="1"/>
<img src="http://economictimes.indiatimes.com/thumb/msid-45891755,width-640,resizemode-4/nasas-images-of-most-remarkable-events-you-cant-miss.jpg" alt="2"/>
<img src="http://i.dailymail.co.uk/i/pix/2013/11/03/article-2486855-192ACC5200000578-958_964x682.jpg" alt="3"/>
<img src="http://mstatic.mit.edu/nom150/items/199-HybridImage.jpg" alt="4"/>
</div>
Instead of having an .invisible class, I used a .visible class, which also has a z-index of 1, greater than that of the default images. So the image that has that class, will be visible, while the others will have opacity: 0 by default.
I also extended the jQuery object to have a nextOrFirst method (which I stole from here), so that when the visible image is the last one of the images in the stack, the next one will be the first. So now, the order of the images, as they appear, goes from top to bottom.
I decided to do it like this in order to keep your CSS transitions, but you can also use jQuery's fadeIn and fadeOut methods.

Something like this should do it:
$(document).ready(function() {
$("#cf_onclick").click(function() {
var current = $("#cf2 img.top").removeClass('top');
var next = current.next();
next = next.length ? next : current.siblings().first();
next.addClass('top');
});
});
#cf2 {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf2 img {
position:absolute;
left:0;
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf2 img.top {
opacity: 1;
}
#cf_onclick {
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="cf_onclick">Click me to toggle</p>
<div id="cf2" class="shadow">
<img src="http://icons.iconarchive.com/icons/google/chrome/256/Google-Chrome-icon.png" />
<img class="top" src="http://icons.iconarchive.com/icons/kyo-tux/aeon/256/Apps-Safari-icon.png" />
</div>

Obtaining page maximum height in Jquery

I don't know if I am specific enough,
But I created a lightbox-style fadein background but it appears to me that the background won't reach the very bottom of the page. So when I scroll, the white background appears again.
Here is the demo:
http://jsbin.com/limiyisi/1/
HTML
<body>
<div id="overlay"></div>
<a style="position:absolute;" href="#" class="btn btn-default" data-toggle="active">
Button </a>
<div class="ex-height"></div>
CSS
#overlay {
position:absolute;
width: 100%;
height : 100%;
background: #000;
top: 0;
left: 0;
opacity:0;
transition: opacity .3s;
-moz-transition: opacity .3s;
-webkit-transition: opacity .3s;
}
.backdrop {
opacity: 0.4 !important;
}
.ex-height {
height: 1204px;
}
Jquery
$(function() {
function toggle() {
$('#overlay').toggleClass('backdrop');
}
$('[data-toggle="active"]').click(toggle);
});
Thanks for any helpful advice!

Set the height of the overlay to the document's height:
$('#overlay').toggleClass('backdrop').height($(document).height());

Change the #overlay to
#overlay {
position:absolute;
background: #000;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity:0;
transition: opacity .3s;
-moz-transition: opacity .3s;
-webkit-transition: opacity .3s;
}
If that doesn't quite work - try changing the bottom and right values to 100%

demo
$(function() {
function toggle() {
var pageHeight = $('html, body').innerHeight();
$('#overlay').toggleClass('backdrop').height( pageHeight );
}
$('[data-toggle="active"]').click(toggle);
});

Fade one image into another using css or jquery

I need to be able to fade in a second image above the initial image on hover. I need to make sure that second image isn't visible initially until it fades in. The other important note is that neither of the images should fade out entirely at any time. I've tried several approaches such as using 1 image, 2 images, jquery animate and css transition.
I've read that it is possible to animate a change of attribute using jquery? If this is true, how could I animate the change of 'src' in img using jquery?
$(".image").mouseenter(function() {
var img = $(this);
var newSrc = img.attr("data-hover-src");
img.attr("src",newSrc);
img.fadeTo('slow', 0.8, function() {
img.attr("src", newSrc);
});
img.fadeTo('slow', 1);
}).mouseleave(function() {
var img = $(this);
var newSrc = img.attr("data-regular-src");
img.fadeTo('slow', 0.8, function() {
img.attr("src", newSrc);
});
img.fadeTo('slow', 1);
});
This is what i'm currently using. It's the closest i've gotten. But you can see the image change which is not desirable.

Using a single html element with background images
HTML - doesn't get simpler than this
<div id="imgHolder"></div>
CSS
#imgHolder {
width: 200px;
height: 200px;
display: block;
position: relative;
}
/*Initial image*/
#imgHolder::before {
content:"";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
background-image:url(http://placehold.it/200x200);
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
z-index:10;
}
#imgHolder:hover::before {
opacity:0;
}
#imgHolder::after {
content:"";
background: url(http://placehold.it/200x200/FF0000);
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Demo
OR if you want to use image tags...
Stealing straight from: http://css3.bradshawenterprises.com/cfimg/
HTML
<div id="cf">
<img class="bottom" src="pathetoImg1.jpg" />
<img class="top" src="pathetoImg2.jpg" />
</div>
CSS
#cf {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity:0;
}
There are many other examples in the link as well to play with, but this will get you started.
Final Opacity
You've mentioned you don't want the initial image to disapear comletely. To do this change opacity:0 to opacity:0.5 or something similar. You'll need to experiment with that value to get the result you want.
Demo with final opacity of 0.8
Dynamic Image Sizes
I think you will be stuck with the two image version for this if just using CSS. HTML is the same.
CSS
#cf {
position:relative;
}
#cf img {
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.bottom {
z-index:-1;
opacity:0;
position:absolute;
left:0;
}
#cf:hover img.top {
opacity:0.8;
}
#cf:hover img.bottom {
display:block;
opacity:1;
}
Demo