CSS Transition between adding classes in Javascript

Question

I'm currently in the process of designing a tumblr theme, and I found this bit of code and edited it to my needs:

<script>function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#stickhere').offset().top;
if (window_top > div_top) {
    $('#container').addClass('stick');
    $('#portraitavatar').addClass('left');
    $('#blogtitle').addClass('leftalign');
    $('#blogdescrip').addClass('leftdescrip');
} else {
    $('#container').removeClass('stick');
    $('#portraitavatar').removeClass('left');
    $('#blogtitle').removeClass('leftalign');
    $('#blogdescrip').removeClass('leftdescrip');
}}

$(function () {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});</script>

The script changes elements in my header when it hits the top of it, changing the CSS of each one, which I've had no problem with. What I was wondering if there was a way to make some kind of transition between the regular form of the element and when the script adds the classes? So the header would go from its normal look then transition to the modified when the script executes. I would also need it to reverse the changes if the user returns to the top of the page. Any help much appreciated!

ryanpither · Accepted Answer · 2014-11-24 01:57:40Z

1

You could use CSS transitions that will transition between any values that are different in the added classes:

-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;

You will have to have similar properties to transition between though. If the original state has height:45px; and the new one has height:36px;, when the javascript triggers it'll go between those values over 500ms.

answered Nov 24, 2014 at 1:57

ryanpither

4664 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ryanpither Over a year ago

You would place them on the regular element to get the transition between initial and +class working. But you can then place a different transition declaration on the +class version (which will then handle when that class is taken away). So you could use 2 separate transitions if you wanted to.

Collectives™ on Stack Overflow

CSS Transition between adding classes in Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related