Jump to content
Search Community

Simple Question on Tweening button css on hover

hackfin test
Moderator Tag

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have the following code that works fine using jQuery.  I would like to replace it with native javascript but my javascript replacement does not work.  I figured there is something simple I missed in my translation but at this point I just can not figure it out.  Any assistance would be appreciated.

var buttonHighlight = function (button) {
	var animation = TweenLite.to(button, 0.3, {
			backgroundColor : "#B18D89",
			ease : Linear.easeNone,
			paused : true
		});
	return animation;
};

jQuery(".button").each(function () {
	this.animation = buttonHighlight(this);
	jQuery(this).hover(function () {
		this.animation.play();
	}, function () {
		this.animation.reverse();
	});
});

Below is the javascript replacement that is not working:

[].forEach.call(document.querySelectorAll(".button"), function () {
	this.animation = buttonHighlight(this);
	this.addEventListener("onmouseenter", function () {
		this.animation.play();
	});
	this.addEventListener("onmouseleave", function () {
		this.animation.reverse();
	});
});

See the Pen obreOP by hackfin (@hackfin) on CodePen

Link to comment
Share on other sites

  • Solution

Inside a callback like that, "this" is usually the window object. In jQuery, "this" is the element because jQuery is setting what "this" refers to in the function. So yeah... understanding what "this" is in JavaScript can be hard to follow sometimes.

 

This tweet nicely sums up "this" in JavaScript.

https://twitter.com/oscherler/status/660049264903643136

 

The first parameter of your callback is the element, so use that instead. The second parameter is the index, and the third is the array, in case you need any of those. 

See the Pen ?editors=0010 by osublake (@osublake) on CodePen

 

Also, you need to drop the "on" for you events. It should be mouseenter and mouseleave.

 

You should check out this site to help with your transition over to vanilla JavaScript.

http://youmightnotneedjquery.com/

  • Like 3
Link to comment
Share on other sites

Blake, even though the example on codepen works, it still does not work in the context of my entire script.  The only difference between the codepen example and my script is the "buttonHighlight" function is defined through an object property/user defined callback function.  The thing that really bugs me is the old jQuery code works fine with the "buttonHighlight" function which makes no sense to me.  I may have to put in a codepen example that duplicates my script but it will take some time to do it.  Do you have any suggestions on how I can trouble shoot this?

 

Thanks,

James

Link to comment
Share on other sites

Well, one of the best ways to track down the source of a problem is to use the debugger and set break points so you can inspect your values along the way. It's most likely some slight variation between jQuery and vanilla JavaScript, like not referencing the element correctly in a forEach loop. If you post your code I could take a look at it, or if you want to keep it private you could just send it to me.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...