jquery - jQuery 动画对象看起来像它漂浮在水中

Question

所以我对jQuery相当陌生，我正在尝试制作漂浮在水中的冰山的连续动画。

这是水上的冰山。。

而且我希望它有点旋转和摆动，这是我当前的循环动画代码.. 只需要一些帮助让它做我想做的事哈！

function iceburg() {
    jQuery('.iceburg').css({bottom:0});
    jQuery('.iceburg').animate ({
        bottom: '10px'
    }, 200, function() {
        jQuery('.iceburg').animate ({
            bottom: '0px'
        }, 200);
    });
}
iceburg();

我无法弄清楚我做错了什么以及如何旋转它？有人可以帮忙吗？

Answer 1

尝试

var ice = $('.iceburg');

function anim() {
    setInterval(function(){
        ice.animate({
            top:'+=20'},
          { 
            duration:1000,
            step:function()
                  { ice.css('-webkit-transform','rotate(-0.5deg)');}
                });

       ice.animate({
              top:'-=20'},
             { 
               duration:1000,
               step:function()
                  { ice.css('-webkit-transform','rotate(0.5deg)');}
                });
         });
   }

   anim();

小提琴http://jsfiddle.net/code_snips/dkFqQ/

Answer 2

如果您希望效果...循环，则必须设置循环。利用setInterval

http://jsfiddle.net/TCHdevlp/kj6tk/1/

此外，$(this)在您的回调中使用而不是jQuery('.iceburg')第二次