I'm trying to animate some images I am getting via instagram and appending to a <ul> item. But it seems like I cannot animate any of the dom elements that are being created during the api call. I have a simple <ul> like this :
<ul class="instagram">
</ul>
And then the js is like this :
$.ajax({
type: "GET",
dataType: "jsonp",
url: "https://api.instagram.com/v1/users/1/media/recent/?access_token=MY_ACCESS_TOKEN",
success: function(data) {
//load 20 images into <li> elements
for (var i = 0; i < 20; i++) {
$(".instagram").append("<li class ='photo' id='photo[" + i + "]'><img src='" + data.data[i].images.low_resolution.url + "'></img></li>");
}
}
});
//try to animate one of the images
TweenLite.to($('#photo[1]'), 2, {opacity:"0.5", ease:Bounce.easeOut, delay:2});
This is not working for some reason. If i try to animate the <ul>, that works. But not the <li> or <img> elements. Does anyone know what i am doing wrong here?
