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

Question

所以我对jQuery很新，而且我正试图在水中漂浮着冰山的连续动画。

这是水上的冰山..

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

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')