Question

我正在为我的网站制作一个新的介绍页面并遇到了一个问题......

徽标旋转，停在0度，然后应缩放到20％并向右移动。

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

有人可以看看发生了什么事吗？

代码（ Fiddle ）

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

Answer 1

问题可能是由于动画将宽度从100％更改为20％（并且在宽度小于200px之前没有效果）。试试这个：

Demo

moveLogo = function(){
    var requiredWidth = $(window).width() / 5;
    $("#logo").animate({width:requiredWidth + 'px'}, 1800);
}

Answer 2

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

Jquery动画滞后/断断续续

2 个答案: