애니메이션 기능에서 $ (this) 사용

Question

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

위 작업을 성공적으로 수행 할 수 있습니다. Plz 좀 봐있다 complete code and execution at fiddle

하지만 위의 일반적인 순위와 함께 일하고 싶습니다. 내가 그것을 제공 할 때 나 TypeError: a.ownerDocument is undefined

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

Answer 1

가 귀하의 코드를 단순화 할 수있다 오류 : 당신은 정상 위치로 30px을 추가 +=30을 사용할 수 있습니다

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

. -30px와 동일합니다.

JSFIDDLE

Answer 2

당신은 $.each JQuery와 기능을 작동 할 필요가

이 예 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); 
});