Selecting objects

[Fernando]

Hi,

 

I have several buttons named secuentially (bot0, bot1, bot2...) and I'd like to be able to select them individually within a tween.

 

Is there a way to achive that?

I'm pretty new to js and I don't know if that's possible.

 

Here's the tween:

 

TweenLite.to(bot0, .2, { backgroundColor:menuColorIdle[str.charAt( str.length-1)], ease:Cubic.easeOut});

I'd like to be able to select, let's say, bot2 without changing much. Passing 2 to a function for example.

 

Thanks in advance

[Carl]

Assuming that the names are actually ids then it should be fairly straight forward

 

<button id="bot0"></button>

<button id="bot1"></button>

 

 

 

function tweenElement(num) {
var element = document.getElementById("bot" + num);
TweenLite.to(element, 1, {left:200});
}
 

[Fernando]

I guess I could also use jquery selector, right?

 

$('bot'+num)

I finally created an array instead of individual elements.

Makes more sense.

 

I have another problem selecting elements.

I want to assign some behaviours to the buttons with this loop:

 

for (var i=0;i<5;i++)
	{
	tapa[i].parent().mouseenter(function() {bgChange(i,0);});  
	tapa[i].parent().mouseleave(function() {bgChange(i,1);});
	}

Then the function:

function bgChange(elem,tipo){
		if(tipo==0)
			{
			TweenLite.to(tapa[elem], .2, { backgroundColor:menuColorIdle[elem], ease:Cubic.easeOut});
			}else {
				TweenLite.to(tapa[elem], .5, { backgroundColor:menuColorOver[elem], ease:Power1.easeOut});
				}
		
	}

The problem is that the tween only sees i=5, instead of assigning secuential numbers to the functions.

 

I just don't know how to pass the value.

 

Thank you.

[Carl]

Yes, jQuery would be an excellent tool to select your elements.

 

From looking at your code, I'm not quite sure why 5 is getting passed into all the functions. I would really need to see all the html and css. Codepen.io is a great tool for prototyping and finding bugs. 

 

 

Perhaps if you put a real basic example on there, I or someone else will be able to quickly identify the problem. Again, from just seeing the js code, it looks like it should work... but being able to add few console.log()'s to track down what is happening would go a long way.

 

Just be sure to link up TweenMax.min.js from the CDN:

http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/TweenMax.min.js

 

---

As a side note you may find this example helpful: 

See the Pen iLosa by GreenSock (@GreenSock) on CodePen.

It isn't taking the same approach as you, but basically each img in the #nav when clicked figures out what its index() is relative to its parent. Based on that index, it creates a tween on an element with a similar index inside another parent. 

[jamiejefferson]

i doesn't get evaluated at the time you are creating your anonymous functions for mouseenter/mouseleave. Instead, each function is referring to the i variable in its creation scope, and after the loop i is equal to 5, therefore for all the functions i=5.

 

You might want to consider adjusting your mouse event setup. I can't tell if your HTML would correspond to this kind of design, but take a look at

See the Pen uxeFf by jamiejefferson (@jamiejefferson) on CodePen.

and see if you could expand on this kind of event delegation to suit your page.

[Fernando]

Ok, thank you.

 

That looks great.

 

I'm used to actionscript and sometimes this little things drive me crazy.