Converting TweenMax Styling with CSS Properties to TweenMax Styling by Using "className: '+=nameOfClassInStylesheet' "

[jstafford]

TweenMax Styling with CSS Properties - works appropriately

 

Using css properties in TweenMax, no classes added, I get the following:

- any time I mouseenter/focus on the navigation links (don't worry about dropdown) I get the appropriate hover effect

- any time I mouseleave/blur on the navigation links I get the appropriate hover removal effect

- can do this how ever many times with success

 

 

TweenMax Styling by Using "className: '+=nameOfClassInStylesheet' "  *does not work appropriately

See the Pen ojyKEY by jstafford (@jstafford) on CodePen

 

What I mean by this, is that instead of using the direct class properties like I am in the first codepen, I am adding by className instead using TweenMax. I am trying to do this in favor of above b/c including CSS Styles inside my javascript is a little messier in my opninion. I want to do it this way but can't.

 

- I get the initial mousenter/focus effects when hovering over in initial pass over each of the navigation links

- I get the initial mouseleave/blur effect when removing hover over initial pass over each of the navigation links

- Subsequent attempts  at invoking these effects produce nothing

 

PLEASE DON'T GET OVERWHELMED WITH THE window width logic. If the codepen is > 767, the appropriate hover  effect is a black border underline. If less than this, it does the hover effect with a left black border.

See the Pen LprwWG by jstafford (@jstafford) on CodePen

[Diaco]

Hi jstafford 

 

if i understood correctly , pls try like this :

$( "ul.nav > li > a").hover(
 function(){ TweenMax.to($(this),0.3,{className:"+=myClassName"}); }, 
 function(){ TweenMax.to($(this),0.3,{className:"-=myClassName"}); }
);


// or


$("ul.nav > li > a").each(function(){
  this.anim = TweenMax.to($(this), 0.3, {className:"+=myClassName" , paused:true});
});
$("ul.nav > li > a").hover(over, out);
function over(){ this.anim.play() };
function out(){ this.anim.reverse() };

[jstafford]

Hi Diaco! Thank you very much for responding to my post. Your code help greatly simplifies things. Thanks.

 

I forked my 2nd codpen where I was attempting to Tween by className instead of css property and I ran into a bit of a hurdle. What am I missing?

 

See the Pen wKxwKN by jstafford (@jstafford) on CodePen

 

I know the mouseenter and mouseleave event is firing when hovering over the links, but nothing happens, no errors. : /

[Diaco]

pls check this out : 

See the Pen mejbwz by MAW (@MAW) on CodePen

[jstafford]

That works. Thanks Diaco!