$(this) Not available - what am i missing?

Question

http://jsfiddle.net/ZGnTe/

    function iphoneAnimate() {
        $('.iphone-screen div').repeat().css({
        opacity: 0,
        top: 0
    })
        .each($).fadeTo(1000, 1).animate({
        top: $('.iphone-screen').height() - $(this).find('img').height()
    }, 4000).fadeTo(1000, 0, $);
}

iphoneAnimate();

$(this) is not returning the div containing the image. Its returning no value at all when i try to get the height of the img tag within $(this). I am using the jquery-timing plugin but I believe the problem lies in my syntax not the plugin. Not sure tho.

the top value should be a negative number. for example height of .iphone-screen (577) minus the height of the current divs image (first one is 1375). This should animate it image div up so that it just about reaches the bottom of the image in the screen.

Answer 1

You need to use a callback function after one of your chained elements, otherwise the values are computed only once.

function iphoneAnimate() {
    $('.iphone-screen div').repeat().css({
        opacity: 0,
        top: 0
    })
    .each($)
    .fadeTo(1000, 1)
    .then(function(){ 
        $(this).animate({top: $('.iphone-screen').height() - $(this).height()
                                                              },4000);})
    .fadeTo(1000, 0, $);
}

iphoneAnimate();

Working demo : http://jsfiddle.net/ZGnTe/2/

Answer 2

Perhaps it's because the properties that you're passing into the .animate() function is not a function itself.

Try a different selector that can achieve the same result e.g.

function iphoneAnimate() {
    $('.iphone-screen div').repeat().css({
        opacity: 0,
        top: 0
    })
        .each($).fadeTo(1000, 1).animate({
        top: $('.iphone-screen').height() - $('div img').height()
    }, 4000).fadeTo(1000, 0, $);
}

here's a link to the fiddle: http://jsfiddle.net/ZGnTe/1/

I think the "this" object can only be accessed in the callback function.

To compensate for the generality of the "div img" selector, you can add a filter (such as .filter(":animated")) to aquire only the item that is being animated.

I recommend expanding your each function as in this example: (https://api.jquery.com/each/#example-1).

Answer 3

I thing, the expression $(this) is being evaluated in the context of iPhoneAnimate method. Since you are calling the method without a specific context, this evaluates to nothing.

If you are accessing this from within a delegate or an anonymous method, it would have been evaluated to the jquery object's context.