Search code examples
jqueryanimationtimingjquery-timing

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

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.

Solution

  • 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/