使用jquery使图像在循环动画中上下反弹

我是jquery新手，我想为我正在开发的网站创建一个孩子们在跳跃城堡（上下运动）上弹跳的效果

下面是一个非常精简的网站结构。我怎样才能让她像在跳城堡一样上下移动呢

图像的id为ballerina

使用此代码

var int=self.setInterval(function(){bounceIMG()},500);

function bounceIMG(){
   if($("#ballerina-wrapper").css('margin-top') == '0px'){
      $("#ballerina-wrapper").animate({
         marginTop: "30px"
      }, 150 );
   }    else {
      $("#ballerina-wrapper").animate({
         marginTop: "0px"
      }, 150 );
    }
}

---

或者使用jquery ui反弹效果…

假设您想要逼真的物理效果，您必须用javascript设计一个超时循环，并为图像应用适当的速度。如果您只想进行移动，请使用jquery通过循环一步一步地更改图像的位置。jQueryUI中存在反弹效果