Develop Reference

Applying animation when removing a class from div [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have the following code which applies .upper class to #top-btn and it appears at the bottom when the user scrolls down by a certain amount and removes it when they scroll back up. It animates #top-btn from the bottom of the page.
However when the class is removed while scrolling up, I want it to animate back down. The way I have it it just blinks away (because the class upper is just removed).
jQuery(document).ready(function($){
// adjust this number to select when your button appears on scroll-down
var offset = 300,
scroll_top_duration = 3000,
// bind with the button link
$animation = $('#top-btn');
// apply animation
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $animation.addClass('upper') :
$animation.removeClass('upper');
});
});
body,html{
width:100%;
position:relative;
height:100%;
}
body{
background-color:green;
height:4000px;
}
#top-btn {
position: fixed;
z-index: 999;
padding: 0; margin: 0;
bottom: -100px; right: 0;
}
#top-btn.upper {
bottom: 0;
-webkit-transition: bottom 0.35s ease;
-moz-transition: bottom 0.35s ease;
-ms-transition: bottom 0.35s ease;
-o-transition: bottom 0.35s ease;
transition: bottom 0.35s ease;
}
#top-btn-BG {
display: block;
position: relative;
z-index: 950;
border-width: 0 0 100px 100px;
border-color: transparent transparent #fff transparent;
border-style: solid;
right: 0; bottom: 0;
width: 0; height: 0;
-webkit-transform:rotate(360deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="top-btn">Button</button>

Instead of removing .upper you should add a class .lower which will have bottom:-30px;. If you don't know height of the button then you can set it from jquery.
Then your jquery will become like this:
( $(this).scrollTop() > offset ) ?
$animation.addClass('upper').removeClass("lower"):
$animation.addClass('lower').removeClass("upper");
jQuery(document).ready(function($){
// adjust this number to select when your button appears on scroll-down
var offset = 300,
scroll_top_duration = 3000,
// bind with the button link
$animation = $('#top-btn');
// apply animation
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $animation.addClass('upper').removeClass("lower"):
$animation.addClass('lower').removeClass("upper");
});
});
body,html{
width:100%;
position:relative;
height:100%;
}
body{
background-color:green;
height:4000px;
}
#top-btn {
position: fixed;
z-index: 999;
padding: 0; margin: 0;
bottom: -100px; right: 0;
}
#top-btn.upper {
bottom: 0;
-webkit-transition: bottom 0.35s ease;
-moz-transition: bottom 0.35s ease;
-ms-transition: bottom 0.35s ease;
-o-transition: bottom 0.35s ease;
transition: bottom 0.35s ease;
}
#top-btn.lower {
bottom:-30px;
-webkit-transition: bottom 0.35s ease;
-moz-transition: bottom 0.35s ease;
-ms-transition: bottom 0.35s ease;
-o-transition: bottom 0.35s ease;
transition: bottom 0.35s ease;
}
#top-btn-BG {
display: block;
position: relative;
z-index: 950;
border-width: 0 0 100px 100px;
border-color: transparent transparent #fff transparent;
border-style: solid;
right: 0; bottom: 0;
width: 0; height: 0;
-webkit-transform:rotate(360deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="top-btn">Button</button>

You can call a function in conditional operator for removing the class and scroll the page down. something like this:
( $(this).scrollTop() > offset ) ? $animation.addClass('upper') :
scrollDown();
function scrollDown(){
$('#top-btn').removeClass('upper');
//here goes the code to scroll down//;
}

CSS3 transition animation when adding/removing class in child elements

I have a problem that CSS3 transitions doesn't work on child elements when adding a class to a parent.
Here's my code:
http://jsfiddle.net/4zwg3/327/
Image doesn't get animations and instantly goes to 50px height.
CSS:
.header {
height: 400px;
width: 400px;
background: blue;
}
.small_header img {
height: 50px;
background-size: auto 100%;
-webkit-transition: all 1.7s ease;
transition: all 1.7s ease;
}
.small_header {
height: 100px;
background-size: auto 100%;
-webkit-transition: all 1.7s ease;
transition: all 1.7s ease;
}
HTML:
<div class="header">
<img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg">
</div>
Javascript:
var click = 1;
$( ".header" ).on( "click", function() {
console.log('works');
if (click == 1) {
$(".header").addClass("small_header");
$(".small_header").removeClass("big_header");
click = 0;
} else {
$(".header").addClass("big_header");
$(".small_header").removeClass("small_header");
click = 1;
}
});
But as you can see there's no transition animations on image.
How can it be fixed?

This issue because the image doesn't have any start height and browser can't calculate the transition, and if you add transition on the small_header class, the transition works only when the image shrinks.
$( ".header" ).on( "click", function() {
$(".header").toggleClass("small_header");
});
.header {
height: 400px;
width: 400px;
background: blue;
}
.header img {
height:200px;
-webkit-transition: all 1.7s ease;
transition: all 1.7s ease;
}
.small_header img {
height: 50px;
background-size: auto 100%;
}
.small_header {
height: 100px;
background-size: auto 100%;
-webkit-transition: all 1.7s ease;
transition: all 1.7s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg">
</div>

first of all, I would avoid that handling with these two classes and the "click" variable.
Your JS should look more like:
$( ".header" ).on( "click", function() {
console.log('works');
$(".header").toggleClass("small");
});
Than your CSS should look like this:
.header {
height: 400px;
width: 400px;
background: blue;
}
.small {
height: 100px;
-webkit-transition: all 1.7s ease;
transition: all 1.7s ease;
}
.small img {
height: 50%;
-webkit-transition: all 1.7s ease;
transition: all 1.7s ease;
}

Try it:-
#someDiv{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

It can't be animated, because CSS knows nothing about your start size of image. You should add image size for calculation of animation:
.header img {
height: 400px;
}

Transition on overlay

I have a left menu that slides in when the user clicks on the hamburger. Behind it is an overlay with the following SCSS:
.overlay {
background-color: $glb-nav-80-opacity-white;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 200;
cursor: pointer;
}
.left-menu {
background: $glb-nav-dark-blue;
position: fixed;
overflow-x: hidden;
overflow-y: auto;
margin: 0;
padding: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
a:hover {
color: $glb-nav-white;
}
}
When people click on the hamburger menu, the overlay shows up abruptly. I need it to fade in. How can I do that using CSS?
Here's the HTML:
<div class="overlay"></div>
<div class="left-menu"></div>
When the user opens the page the left-menu has a left position of -284px. Then when people click on the hamburger icon, I add a class to the div that sets its left position to 0.

Instead of adding a class, you can set the opacity using jQuery's .CSS
For example:
$(".overlay").css({opacity:50});
To reset it, use
$(".overlay").removeAttr("style");
Use CSS transitions as you did for the menu:
.overlay {
background-color: $glb-nav-80-opacity-white;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 200;
cursor: pointer;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}

Use css transitions as you did with the menu, ie:
.overlay {
// other css
-webkit-transition: opacity 500ms ease;
-moz-transition: opacity 500ms ease;
-o-transition: opacity 500ms ease;
transition: opacity 500ms ease;
}
Or, if using SASS: #include transition(opacity 500ms ease);
Note, you can set the timing and style to be what you like, more here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

just add transition to the overlayed div
div {
/* -transition: 2 seconds- */
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: 2s;
}
div:hover {
height: 200px;
background: red;
}
<div>transition on hover</div>

css opacity ease in out affecting other elements too

My page has a text form in the middle. The aim is to use css opacity transitions to switch background images by fading. (I'll be switching background images quite often)
Currently got it working nicely by using two layers of background images. To display a new image at the bottom layer, we fade out the top layer (opacity 1 to 0). To display a new image at the top layer, we fade in the top layer (opacity 0 to 1).
The problem is that my text form fades along with the top layer - which I want it to stay visible. How do I make it unaffected by the fading?
Attempts to solve this:
Setting z-index of either #searchForm input or .formDiv to 999999, thinking that this will put the form right at the top of the hierachy so it would be unaffected by transitions below. However, didn't work.
Setting position of #searchForm input or .formDiv to absolute. From http://www.w3schools.com/css/css_positioning.asp,
"Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist."
This stackoverflow post CSS3 Alternating table rows opacity affects text as well as background says that child elements are affected by opacity too. I tried placing the div containing the background images inside the formDiv class so that it wouldn't be a child. But this will get the form covered by the top image, even without opacity on.
function changeBackground(newUrl) {
//check which layer is currently activated
if ($('#background-image-top').hasClass('transparent')) {
//place new image over top layer
$('#background-image-top').css('background-image', 'url(' + newUrl + ')');
//fade in new image
$('#background-image-top').toggleClass('transparent');
} else {
//place new image over bottom layer
$('#background-image-bot').css('background-image', 'url(' + newUrl + ')');
//fade out old image
$('#background-image-top').toggleClass('transparent');
}
}
#background-image-top {
background-image: url("../images/default.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
-webkit-background-size:cover;
-moz-background-size:cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
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; }
#background-image-bot {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
-webkit-background-size:cover;
-moz-background-size:cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;}
.transparent {
opacity: 0.25;}
.formDiv {
background-color: red;
max-width: 500px;
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 35%;}
#searchForm input {
width: 300px;
height: 30px;
font-size: 18px;}

I have made a little fiddle where you might can get inspiration, i just use a class to toggle the opacity and them put under the form with position absolute, hope it helps :)
and then use a click function with jQuery to toggle the effect.
the css:
form {
position: relative;
z-index: 10;
}
#background1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightblue;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#background2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightgreen;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.hide {
opacity: 0;
}
http://jsfiddle.net/9jb68w2o/

+++ If you feel better to use css opacity transitions to switch background images by using only one div ie) #background1, you can use this code
$(document).ready(function() {
$('#toggle').click(function(e) {
e.preventDefault();
$('#background1').toggleClass('color1');
});
});
body {
background-color: #f8f8f8;
color: #555;
}.container {
position: relative;
margin: 30px auto;
padding: 20px;
width: 200px;
height: 150px;
background-color: #fff
}
form {
position: relative;
z-index: 10;
}
input[type=text] {
margin: 10px 0;
padding: 5px;
width: calc(100% - 10px);
font-size: 15px;
outline: none;
}
input[type=submit] {
width: 100%;
text-transform: uppercase;
font-size: 15px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
#background1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: lightblue;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#background1.color1 {
background-color: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<div id="background1"></div>
<form>
<h2>Awesome form!</h2>
<input type="text" placeholder="Some text here" />
<input id="toggle" type="submit" value="Change now!" />
</form>`enter code here`
</div>

How can I delay the speed of hover purely via CSS3 for a div?

Please review the JSFiddle I am using: http://jsfiddle.net/txdwg/2/
HTML:
Hover here
<div>Show me now!</div>
CSS:
div {
display:none;
width:100px;
height:100px;
background:red;
margin:20px;
}
a {
font-size:16px;
font-weight:bold;
}
JS:
(function($){
$.fn.hoverDelay = function(over, out, ms){
var delay, ms, that;
ms = ms || 500;
that = this;
that.bind('mouseenter.hoverDelay', function(e){
delay = setTimeout(function(){
over.call(that, e);
}, ms);
}).bind('mouseleave.hoverDelay', function(e){
clearTimeout(delay);
out.call(that, e);
});
};
})(jQuery);
$(function(){
$('a').hoverDelay(function(){
$('div').fadeIn(300);
}, function(){
$('div').fadeOut(300);
}, 300);
});
But instead of JS I want to do this via CSS3. How can I still use the hover pseudo selector and have a similar animation?

http://jsfiddle.net/bvgVK/2/
div {
width: 100px;
height: 100px;
background: red;
margin: 20px;
-webkit-opacity: 0;
-moz-opacity: 0;
-ms-opacity: 0;
-o-opacity: 0;
opacity: 0;
-webkit-transition: opacity 300ms;
-moz-transition: opacity 300ms;
-ms-transition: opacity 300ms;
-o-transition: opacity 300ms;
transition: opacity 300ms;
-webkit-transition-delay: 300ms;
-moz-transition-delay: 300ms;
-ms-transition-delay: 300ms;
-o-transition-delay: 300ms;
transition-delay: 300ms;
}
a {
font-size: 16px;
font-weight: bold;
}
a:hover + div {
-webkit-opacity: 1;
-moz-opacity: 1;
-ms-opacity: 1;
-o-opacity: 1;
opacity: 1;
}
Is something like that with all the vendor prefixes, but as uross suggested, go to that page or use http://cssprefixer.appspot.com/ or something else, but animations without js or flash or something else in MSIE < 10, hummm... dunno.