Dan Dan - 4 months ago 17
CSS Question

Using CSS classes as jQuery variables

To my understanding, in

jQuery
you can set a variable then use it later down the line.

var x = 2;
function add() {
x = x + 2;
}


In my code, I have a
CSS
class as a variable.

var scroll = $('.verticalScrollBar');
function changeScrollBar() {
...
TweenMax.set(scroll, {css:{height:scrollBarHeight+'%'}});
...
}


However, this does not seem to work. Initially, I thought it might have been a problem with
GSAP TweenMax
so I tried the following code.

function changeScrollBar() {
...
TweenMax.set($('.verticalScrollBar'), {css:{height:scrollBarHeight+'%'}});
...
}


To my surprise this did work. So my question is why does the line of code
TweenMax.set($('.verticalScrollBar'), {css:{height:scrollBarHeight+'%'}});
work but this line of code
TweenMax.set(scroll, {css:{height:scrollBarHeight+'%'}});
does not?

Working example JSFiddle

Broken example JSFiddle

Answer

Changing:

var scroll = $('.verticalScrollBar');

To:

var scroll = '.verticalScrollBar';

Results in your broken example operating as expected.