1

我目前正在尝试通过重新创建我在网上遇到的项目的酷演示来扩展我的 jQuery 知识。我现在正在研究的是http://www.beautyoftheweb.com/#/private上的旋转眼球，但我很难找到一种方法让我的图像在两个方向上旋转。

我正在使用一组分层图像，就像他们在那个网站上所做的那样，我已经为单个图像在两个不同方向上获得了一个很好的平滑旋转。我当前的代码如下所示：

var angle = 0,
    angle2 = 0,
    angle3 = 0,
    angle4 = 0;
    setInterval(function(){
      angle += 0.5;
     $("#3").rotate(angle);
},30);
setInterval(function(){
      angle2 -= 0.025;
     $("#2").rotate(angle2);
},10);
setInterval(function(){
      angle3 += 0.25;
     $("#5").rotate(angle3);
},10);
setInterval(function(){
      angle4 -= 0.025;
     $("#4").rotate(angle4);
},10);

我也在使用 jQueryRotate，一切正常。有没有办法实现一个功能，让它运行 X 秒，之后我可以调用另一个旋转，所以它会朝两个方向移动？就像是：

angle +=0.25;
    run for 3-4 seconds
angle -=0.25;
    run for 1 second
angle +=0.25; 
    run for 2 seconds
angle +=0.125;
    run for 1 second
4

1 回答 1

1

您正在寻找的功能听起来像 javascript 中的 setTimeout() 方法。

这是一个很好的资源：https ://developer.mozilla.org/en/DOM/window.setTimeout

您可以做的是使用 setInterval() 运行一个函数，该函数在各个角度上调用 setTimeout() 函数。这将使它在一定的时间间隔内循环，就像您的原始样本一样。只需将您的第一个旋转设置为一定长度，然后相应地链接其他动画。

代码示例如下：http: //jsfiddle.net/avCx5/6/

更新我删除了旧代码，因为有一个错误。在大多数浏览器中，在 setTimeout 中使用函数参数会导致它立即执行。在上面的例子中，第一个动画运行了 3 秒，然后第二个动画运行了 3 秒，然后它们都停止了。（为了清楚起见，我将图像拆开）。

这是一个将无限期运行的粗略示例：http: //jsfiddle.net/avCx5/7/

为了正确回答，这里是代码：

HTML

    <img src="http://i.imgur.com/w7dQh.png" class="overlay" id="1" />
    <img src="http://i.imgur.com/isx4q.png" class="overlay" id="2" />​

jQuery

   var angle = 0,
       angle2 = 0,
       angle3 = 0;

   var angle1rotation;
   var angle2rotation;

   function rotation1() {
      angle1rotation = setInterval(function() {
        angle3 += 0.25;
        $("#1").rotate(angle3);
      }, 10);

   }

 function rotation2() {
      angle2rotation = setInterval(function() {
         angle2 -= 0.5;
         $("#2").rotate(angle2);
      }, 10);
  }

  function animation_sequence() {
     rotation1();
     window.setTimeout(function(){
       clearInterval(angle1rotation);
       rotation2();
     }, 3000);
     window.setTimeout(function(){
       clearInterval(angle2rotation);        
     }, 6000);   
   }

   var main_loop = setInterval(function(){
      animation_sequence();
   }, 8000);


   animation_sequence();
于 2012-07-25T23:46:40.797 回答