1

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

这是水上的冰山。。

在此处输入图像描述

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

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

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

4

2 回答 2

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/

于 2013-11-13T14:14:58.667 回答
0

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

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

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

于 2013-11-13T13:19:45.553 回答