jQuery可以无限旋转运行

我的问题分为两部分。。。第一个是我使用jqueryrotate来模拟一个加速的时钟。在大多数情况下，这是可行的，但它似乎停止一旦它达到某一点，我不知道为什么。下面是我正在使用的代码，下面是我正在讨论的一个实例

我问题的第二部分是关于同一个时钟的，在的实时样本站点上，你会看到你可以点击AM按钮或PM按钮，这两个按钮基本上在2个div之间切换。这适用于现代浏览器，但在IE8中，当您选择PM时，div会正确更改，但根本不会出现时钟指针，我似乎不知道为什么

我已经放置了与此区域相关的全部javascript源代码，包括div开关和时钟指针本身，我希望有人能够向我指出错误的方向

<script>
    // set content on click
    $('.m-btns-button').click(function(e) {
        e.preventDefault();
        setContent($(this));
    });

    // set content on load
    $('.m-btns-button.active').length && setContent($('.m-btns-button.active'));

    function setContent($el) {
        $('.m-btns-button').removeClass('active');
        $('.clock-nav').hide();

        $el.addClass('active');
        $($el.data('rel')).show();
    }

    /**Tooltips**/
    $('.clock-nav a').tooltip(); 


    var rotation = function (){
       $("#image1").rotate({
          angle:0,
          duration: 80000,
          animateTo:360, 
          callback: rotation,
          easing: function (x,t,b,c,d){        // t: current time, b: begInnIng value, c: change In value, d: duration
              return c*(t/d)+b;
          }
       });
    }
    rotation();
    var rotation = function (){
       $("#image2").rotate({
          angle:0,
          duration: 7500,
          animateTo:360, 
          callback: rotation,
          easing: function (x,t,b,c,d){        // t: current time, b: begInnIng value, c: change In value, d: duration
              return c*(t/d)+b;
          }
       });
    }
    rotation();

    var rotation = function (){
       $("#image3").rotate({
          angle:0,
          duration: 80000,
          animateTo:360, 
          callback: rotation,
          easing: function (x,t,b,c,d){        // t: current time, b: begInnIng value, c: change In value, d: duration
              return c*(t/d)+b;
          }
       });
    }
    rotation();
    var rotation = function (){
       $("#image4").rotate({
          angle:0,
          duration: 7500,
          animateTo:360, 
          callback: rotation,
          easing: function (x,t,b,c,d){        // t: current time, b: begInnIng value, c: change In value, d: duration
              return c*(t/d)+b;
          }
       });
    }
    rotation();
</script>

通过反复重新定义rotation，异步回调：rotation在所有情况下都将调用定义的最后一个rotation，即与image4关联的rotation。其他三个预期的递归将消失

您需要一种机制来确保每个回调引用其各自的循环

您可以简单地将函数名更改为rotation1 rotation2 rotation3 rotation4，但通过定义一个可以重用的函数，源代码将更加紧凑

试试这个：

function rotation($image, duration) {
   //Outer function forms a closure trapping $image and duration
   //Inner function is recursive.
   var fn = function () {
       $image.rotate({
            angle: 0,
            duration: duration,
            animateTo: 360,
            callback: fn,
            easing: easing
        });
    }
}

//Easing is the same is all cases
function easing(x,t,b,c,d) {
    return c * (t / d) + b;
}

rotation($("#image1"), 80000);
rotation($("#image2"), 7500);
rotation($("#image3"), 80000);
rotation($("#image4"), 7500);

---

为什么一次又一次地重新定义旋转？callback:rotation是指定义的最后一个函数rotation吗？除了代码不起作用之外，您考虑过CSS吗？你可以在几行CSS中重写它。大家好@Roamer，谢谢你，我刚刚回来回复我自己的帖子，上面有你强调的内容，但非常感谢你花时间为我澄清这一点。。。非常感谢。乔纳森，谢谢你的回复。。。是的，CSS绝对是最好/最简单的选择，不幸的是，整个系统的客户端都在IE8上运行，超过1000名员工都被困在可怕的浏览器上。否则，CSS将解决我所有的头痛问题。@mobius2000，您可能希望运行当前代码。我想它会找到一些有趣的东西。

function rotation($image, duration) {
   //Outer function forms a closure trapping $image and duration
   //Inner function is recursive.
   var fn = function () {
       $image.rotate({
            angle: 0,
            duration: duration,
            animateTo: 360,
            callback: fn,
            easing: easing
        });
    }
}

//Easing is the same is all cases
function easing(x,t,b,c,d) {
    return c * (t / d) + b;
}

rotation($("#image1"), 80000);
rotation($("#image2"), 7500);
rotation($("#image3"), 80000);
rotation($("#image4"), 7500);