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

【问题标题】：jQuery animating object to look like its floating in waterjQuery 动画对象看起来像它漂浮在水中
【发布时间】：2013-11-26 02:33:30
【问题描述】：

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

这是水上的冰山..

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

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

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

【问题讨论】：

同意@TCHdvlp 的优化评论。每次使用jQuery('.iceburg') 时，jQuery 都会遍历 DOM 以查找具有该类的每个元素。最好用那个 jQuery 对象创建一个变量，然后重新使用它。你会得到更好的表现！

标签： jquery css animation jquery-animate

【解决方案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/

【讨论】：

非常有帮助！正是我想要的！遗憾的是，您不能顺利地为“旋转”设置动画，对吧？
@LeviCole 你可以试试一些缓动库，它可以帮助:)

【解决方案2】：

如果你想让你的效果……循环，你必须设置一个循环。使用setInterval

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

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

【讨论】：