Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
colep

how to reference appended element and tween in a loop

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 a function that loops and appends an elements to a div.

How can i reference this newly added element and tween it?

 

 

clickableGrid: function( ){

for (var i = 0; i < 30; i ++)

{

var box = createItem();

$("#tilesview").append(box);

 

//How can i reference this newly added element and tween it?

TweenLite.to($(box), duration, {css : {top:90,left: 100},});

?

}

}

 

createItem: function () {

var tileItem = "<div class='tileItem'><div class='tileImage'></div><div class='tileTitle'>test</div></div>"

return tileItem

},

 

I have been adding them to the stage and then using

 

 

boxes.each( function (i){

 

box = $(this);

 

}

 

to target each added item. but i bet there is a better way. only one iteration.

thanks

cp

Link to comment
Share on other sites

Something like this should be fine to use:

clickableGrid: function() {
 for (var i = 0; i < 30; i ++) {
var box = $(createItem()); // $(...) can be used to create a new DOM element if you feed it valid html as a string
$("#tilesview").append(box); // this new jQuery object is good to go for appending ...
TweenLite.to(box, duration, {css: {top: 90, left: 100}}); // ... and for tweening
 }
}

createItem: function () {
 var tileItem = "<div class='tileItem'><div class='tileImage'></div><div class='tileTitle'>test</div></div>";
 return tileItem;
}

 

It's probably just from you trimming your example down, but it's good to mention that you should remove all trailing commas in javascript objects as IE will have a fit.

 

Also, in regards to DOM elements and your 'boxes' solution, it would be more efficient to just do that as

boxes.each( function (i) {
 TweenLite.to(this, duration, {css: {top: 90, left: 100}});
}

this is a direct reference to the DOM element, which greensock handles perfectly. $(this) just adds the ability to call jQuery functions on that DOM element, so it's more efficient not to do it unless you have to use jQuery on it.

  • Like 3
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.
×