1

我正在为我的网站创建一个新的介绍页面，但遇到了一个问题......

徽标旋转，在 0 度处停止，然后应缩放到 20% 并移动到右上角。

旋转停止后，它会暂停 1.2 秒，然后快速调整项目大小并继续......

有人可以看看，看看发生了什么？

代码（小提琴）

rotate = function(element,initial){
  element = $(element);
  rDeg = initial; //Initial angle
  element.css({
    '-webkit-transform': 'rotate('+rDeg+'deg)',
       '-moz-transform': 'rotate('+rDeg+'deg)',
        '-ms-transform': 'rotate('+rDeg+'deg)',
         '-o-transform': 'rotate('+rDeg+'deg)',
            'transform': 'rotate('+rDeg+'deg)'      
  });
    // Animate rotation with a recursive call
      timer = setTimeout(function() {
        ++rDeg; rotate('#logo',rDeg);
      },5); 
        if(rDeg==-1){ clearTimeout(timer); moveLogo() }
}
rotate('#logo',-80);

moveLogo = function(){ $('#logo').animate({width:'20%'}, 1800) }
4

2 回答 2

2

该问题可能是由将宽度从 100% 更改为 20% 的动画引起的（直到宽度小于 200 像素才会产生效果）。尝试这个：

演示

moveLogo = function(){
    var requiredWidth = $(window).width() / 5;
    $("#logo").animate({width:requiredWidth + 'px'}, 1800);
}
于 2013-07-04T17:16:15.140 回答
0

我建议使用这样的 jquery 插件，这将解决您为简单而创建的递归函数，$('#logo').rotate(90);同时您应该添加调整大小函数$('#logo').animate({width:'20%'}，这样两者都可以同时进行很好的调整大小和位置。希望这可以帮到你。

于 2013-07-04T17:38:15.880 回答