user3550879 user3550879 - 3 years ago 189
CSS Question

Applying animation when removing a class from div

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>




Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download