We Keep Coding

CSS animate on html form

Here's an example of what I am trying to recreate: https://www.hioscar.com/get-quote/
When a user has finished entering information into the input area or selected an option the current line will animate (using translate & opacity, I believe) and the next line will come into view.
I've started something very basic just to get a feel for how it's meant to work using on hover but I'm not sure on how to complete replicate this animation in my own form.
div {
margin-top: 500px;
}
div:hover {
transform: translate(0px, -300px);
opacity: 0.3;
transition: opacity 0.05s linear;
}
<div>
<p>Hello, I am a very basic example</p>
</div>

So you had several problems, you were only animating opacity and if you move the div from under the mouse cursor when you hover it, it won't work.
So I activated all transitions, not just opacity, made the div as tall as the browser, and used the div's internal padding.
body, html {
/* needed so that the div can also be 100% of window */
height: 100%;
}
div {
height: 100%;
padding-top: 500px;
}
div:hover {
padding-top: 300px;
transition: all 0.05s linear;
}
<div>
<p>Hello, I am a very basic example</p>
</div>

Run add class on different elements concurrently jquery

I want to slide a menu bar from the left and at the same time slide the page to the right using CSS and jquery. I can do the sliding no problem but what is happening is the body slides left, then once that is complete the menu slides out
JS
$('body').toggleClass('slide-left', '');
$('.mid-side-menu').toggleClass('slide-out', '');
CSS
.slide-left {
position: fixed;
right: 300px;
transition: right 0.5s;
}
.slide-out {
transition: right 0.5s;
right: 0px;
}
How do I run the two commands at the same time?

I don't think you can accomplish what you want with your current implementation. You would need to add the same class to both items, but have the class act differently based on what it is applied to.
For example:
jQuery
$('.mid-side-menu, body').toggleClass('slide-out', '');
CSS
body.slide-out {
position: fixed;
right: 300px;
transition: right 0.5s;
}
.mid-side-menu.slide-out {
transition: right 0.5s;
right: 0px;
}

jQuery - Click Add/Remove Class - Multiple Buttons

For some reason when I add the second click function it stops working completely. I was wondering if anybody could help pin point what the issue might be?
What I'm trying to do:
The default state is "day" and when "night" is clicked, it removes the day class and adds the night class. Which changes the background image. Which works... Sort of. However, when I add the function for the day button to add the day class and remove the night class is breaks and doesn't work.
Here's a fiddle of what I have: http://jsfiddle.net/790hqykq/3/
$(document).ready(function () {
$('.night').click(function () {
$('#room').addClass('night');
$('#room').removeClass('day');
});
$('.day').click(function () {
$('#room').addClass('day');
$('#room').removeClass('night');
});
});
Thanks!!
Edit: Also - Is there any way to fade this class change? Similar to fadeIn/fadeOut? Thanks!

jsFiddle Demo
The problem with your fiddle is that the #room element has the class day. So does the anchor element. When the event handler is setup
$('.day').click(function () {
It is also assigned to the room element, and as a result of that, #room ends up also having the event handler attached to it. This causes day to always be selected as the element's class, even when night is clicked.
You should consider changing the class name to something like daycolor and nightcolor
<div id="room" class="daycolor">
and
#room.daycolor {
background: #00CCFF;
}

The element with ID room has the class day, as one of the elements within it.
When you attach the handler, it's being attached to both elements.
This should solve your problem:
$(document).ready(function () {
$('.timeButton.day').click(function () {
$('#room').addClass('day').removeClass('night');
});
$('.timeButton.night').click(function () {
$('#room').addClass('night').removeClass('day');
});
});
As per your complement about fading, you can use CSS 3 to achieve this:
#room {
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}
Demo

Change the classnames on your children elements and use that selector for your events.
jsFiddle
HTML:
<div id="container">
<div id="room" class="day">
<a class="timeButton day1">Day</a>
<a class="timeButton night1">Night</a>
</div>
</div>
JS:
$(document).ready(function () {
$('.night1').click(function () {
$('#room').addClass('night');
$('#room').removeClass('day');
});
$('.day1').click(function () {
$('#room').addClass('day');
$('#room').removeClass('night');
});
});
Style:
#container {
width: 300px;
margin: 0 auto;
}
#container a, #container div {
float: left;
display: block;
}
#room {
width: 300px;
height: 200px;
position: relative;
}
#room.day {
background: #00CCFF;
}
#room.night {
background: #0000CC;
}
#room .day1 {
left: 30px;
border: 1px solid black;
}
#room .night1 {
right: 30px;
border: 1px solid black;
}
#room .timeButton {
position: absolute;
width: 80px;
height: 25px;
top: 30px;
cursor: pointer;
text-align: center;
}
#room .timeButton:hover {
background: #fff;
}

Here is another solution, where I just change the css-style via jquery.
Javascript:
$(document).ready(function () {
$('.day').click(function () {
$('#room').css("background-color", "#00CCFF");
});
$('.night').click(function () {
$('#room').css("background-color", "#0000CC");
});
});
Also you need to add a background-color to #room:
background: #00CCFF;
Fiddle:
http://jsfiddle.net/790hqykq/7/

In your script, you reference to ".night" instead ".nightButton".
$('.nightButton').click(function () {
$('#room').addClass('night');
$('#room').removeClass('day');
});
$('.dayButton').click(function () {
$('#room').addClass('day');
$('#room').removeClass('night');
});
To achieve the transition, you can add this CSS propertie to #room.
-webkit-transition: background 2s; /* For Safari 3.1 to 6.0 */
transition: background 2s;
http://jsfiddle.net/790hqykq/13/

you can add css3 for the transitions from day to night.
it wont working in older IE browsers 9 and under but is excellent in all modern browsers.
browser support. You can use this generator to make the code faster.
#room {
width: 300px;
height: 200px;
position: relative;
-webkit-transition: background 1000ms ease-in-out;
-moz-transition: background 1000ms ease-in-out;
-ms-transition: background 1000ms ease-in-out;
-o-transition: background 1000ms ease-in-out;
transition: background 1000ms ease-in-out;
}
Demo jsfiddle

JQuery slide up and down

I'm currently working on a website, and I got a navigation bar, which I placed at the bottom of the page, I want to make it so that when I click on one of my buttons, the navigation bar slides up to the top of my page, and when i click on that same button again, it goes back to its original position (bottom of the page).
Ive already got this piece of code written in JQuery to make my navigation bar slide up:
jQuery:
$(document).ready(function () {
$('.nav-top').click(function () {
$('#navigation').animate({ "top": "0" }, 500);
})
});
HTML:
<nav id="navigation">
<div class="logo">
<span class="color">B</span>AICA
</div>
<div id="menu">
<ul>
<li>
About me
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>
CSS:
#navigation {
background-image: url('../images/header/navigation/bl-opacity50.png');
*background-image: url(../images/header/navigation/bl-opacity50.png);
background-repeat: repeat;
position: absolute;
width: 100%;
height: 100px;
z-index: 1000;
}
Do i have to write some kind of IF statement?
EDIT:
It all worked out fine, but when I try to make a second button, for making my navigation bar move back to the bottom of my page, its not doing anything, so what i want is a button for moving the navigation bar to the top of the page, and a button for moving it to the bottom of the page?

Use .toggleClass and keep the positioning in the CSS:
http://jsfiddle.net/WkFP2/

Yes, You have to write an if statement in your jquery code. The reason is , your jquery code will work only for the first time, where it moves the div from bottom to div. When you click it again, it will still make the element to move to top only. So you need an if statement which calculates the current position of your div and move it to either top or bottom.
$(document).ready(function () {
$('.nav-top').click(function () {
if($('#navigation').position.top()!=0)
$('#navigation').animate({ "top": "0" }, 500);
else
$('#navigation').animate({ "bottom": "0" }, 500);
})
});

You can add a css transition with a .toggleClass if you can set the height in the #navigation.top styling (using 85% as an example).
#navigation.top {
top: 85%;
}
The transitions
#navigation {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
position: absolute;
width: 100%;
height: 100px;
z-index: 1000;
top: 0;
border: 1px solid #333;
}
Here's a fiddle (forked from a previous answer).
http://jsfiddle.net/CmbPJ/

Cross-device CSS problems

I just tested my website with both Google Chrome Desktop and Mobile version, and it seems like the label for the slide-out menu is not displaying. It does work, it's just not displayed, and I have no idea why. Changing positions does not work here, because the slide-out design I'm using is relying on positions, and I need them to be fixed.
Related CSS:
#slideout #label {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
display:block;
float:right;
margin:46% 0 0 0;
padding: 0 2px 6px 2px;
font-size: 20px;
position: fixed;
left:-36px;
-webkit-transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
-moz-transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
-o-transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
transition:left 0.5s ease-in-out,opacity 0.5s ease-in-out;
background-color:#fff;
border-bottom:0 !important;
border-radius:8px 8px 0 0;
}
#slideout.opened #label {
left: 86px;
}
JavaScript:
$('#label').on('click',function(){
$('#slideout').toggleClass('opened');
});
EDIT: I tried using this code:
#slideout #label {
position: absolute;
left: 90px;
}
#slideout {
position: relative;
}
But What happens is, the label is in the right place, but it is cut off and invisible.

position:fixed is unpredictable on mobile, you should be able to fix it by switching to position:relative; even though that may be difficult. There is some decent coverage on this here: http://www.quirksmode.org/blog/archives/2012/10/budding_consens.html

Look at the opacity property of your slide panel.
You set opacity to 0.3 when hiding the panel, your label is inside your panel, so it fades too.
But it looks like there is some problem in chrome mobile, and opacity property. the button disappears completely. You should try to put it outside your panel. When I disable the opacity : 0.3 of the slide panel in chrome inspector, the label appears.
I think you should investigate this.

Try the following in addition to what you have:
#slideout {
position: relative;
}
#slideout #label {
position: absolute;
top: 46%;
right: -10px; (approximate)
}
Obviously, these are overrides for a couple, so integrate them at your discretion. Also, remove the float: right;

That's only a guess, but the problem might come from the javascript event handling which is different on a mobile because the event is actually different. I guess the click event is triggered twice on mobile, something like "touch" or "mousedown", so therefore, the event happening twice, the toggleClass() adds and remove the wanted class. So either you detect mobile with javascript in order to add the correct event
Detecting a mobile browser (detect mobile)
jQuery mobile (click event) (appropriate event)
Or you change the toggle class for "addClass" and "removeClass" with a timer. Something like
var animating = false;
var open = false;
$('#label').on('click',function(){
if (!animating) {
animating = true;
if (open) {
$('#slideout').removeClass('opened');
} else {
$('#slideout').addClass('opened');
}
setTimeout(function() { animating = false }, 500); // 500 = 0.5s of css animation
}
});
Hope this helps­.

use postion:fixed in your css along with respective width-height property.