CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ethanturner123
ethanturner123

Reputation: 47

CSS Transition between adding classes in Javascript

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!

Upvotes: 1

Views: 61

Answers (1)

ryanpither
ryanpither

Reputation: 466

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.

Upvotes: 1

Related Questions