Improve company productivity with a Business Account.Sign Up

x
?
Solved

css transitions

Posted on 2013-12-13
11
Medium Priority
?
278 Views
Last Modified: 2014-01-22
Hi

I am trying to create a CSS transition whereby div areas fade in/out when a menu is clicked

I used display:none originally but noticed transtions dont work with this. I have tried visibiity:hidden but the divs now dont sit in correct place.
Any ideas how to fix this?

My page is here:

https://dl.dropboxusercontent.com/u/35928349/OW/UVEX/HTML/index.html

its the area "What we do"


Thanks
0
Comment
Question by:coolispaul
  • 4
  • 3
  • 2
9 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39716900
I'm not sure which div areas you would like to fade in and out, so can't give you actual code.

but, you can use opacity or background-color for fading type transitions.

core example:

.mydiv{
   opacity:1;
   background-color:red;
   transition: all 1s;
}

.mydiv:hover{
   opacity:.5;
   background-color:blue;
}

Open in new window

0
 

Author Comment

by:coolispaul
ID: 39716936
well its 2 divs that sit one after the other

so:

<div class="slide"></div>
<div class="slide"></div>

using display none pushes the second one up to the top as i intend. ( i dont want to show both at same time)

I guess i will have to use position absolute on these divs if i cant use display:none?

Thanks
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39716954
yes. that sounds correct. Give that a try, and if it's not working, let us know.
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 2000 total points
ID: 39717024
Create a container with position:relative an put both of the divs inside of the container.  style the divs with position absolute and then the will position at the same location and the transition should work fine. for the one you want hidden set opacity to 0.

However the hover is going to be an issue.  Display cannot be animated. so only the top div will respond to hover.

To get the second one to respond you can use a sibling reference

div:hover~div { etc..

can be used so the hove event on the top layer also triggers the transistion on the bottom layer.

Cd&
0
 

Author Comment

by:coolispaul
ID: 39717064
how do you deal with heights when positioning absolute like this though?

The parent container wont get an automatic height from the child elements?
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39717175
I'm not sure what exactly you are trying to do. I don't see any <div class="slide"></div> on your page.

Which items exactly do you want to fade in and out based on what conditions? Please be specific.
0
 

Author Comment

by:coolispaul
ID: 39717192
on here:
https://dl.dropboxusercontent.com/u/35928349/OW/UVEX/HTML/index.html

Under "What we do"

there are 2 buttons that show/hide 2 div's

It works but i have had to give the parent element a fixed height because the child elements are now positioned absolutely.
This could be a problem as its a content managed site so more content could go in theer and this fixed height may become incorrect
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 total points
ID: 39717273
When you generate the page you know what content you have so set the height of the parent dynamically based on content.  Either during generation server side (best) or with script on the client (some client may not have javascript enabled).

Cd&
0
 

Author Comment

by:coolispaul
ID: 39717319
Yep guess will have to do that.

Thanks
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

608 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question