using $(this) in animate function

Question

$('.balloon').animate({top:30} ,1000);
$('.balloon').animate({top:10} ,1000);

I can do above successfully. Plz have a look at complete code and execution at fiddle

But I want above to work with generic top position like following. But when i do it gives me error TypeError: a.ownerDocument is undefined

$('.balloon').animate({top:$(this).css('top')+20} ,1000);
$('.balloon').animate({top:$(this).css('top')-20} ,1000);

Answer 1

Your code can be simplified:

$(document).ready(function() {
    (function foo () {
        $('.balloon').stop(true).animate({top: "+=30"}, 1000, function () {
            $(this).stop(true).animate({top: "-=30"}, 1000, foo);
        });
    })();
});

You can use +=30 to add 30px to the top position. Same for -30px.

JSFIDDLE

Answer 2

you need to work with $.each jquery function

this is Example http://fiddle.jshell.net/cRs9f/1/

$(document).ready(function()
{
    var downs = true;
    setInterval (function()
    {

        $('.balloon').each(function(){

          if(downs)
          {

               $(this).animate({top:30} ,1000);
               $(this).animate({top:$(this).css('top')+20} ,1000);
                downs =false;

          }else
          {
            $(this).animate({top:10} ,1000);
            $(this).animate({top:$(this).css('top')-20} ,1000);
            downs =true;
          }


        });

    },1000);
});