Question

我的问题分为两个部分......第一部分是我使用jQuery Rotate来模拟加速时钟。在大多数情况下这是有效的，但它似乎停止一旦达到某一点，我不知道为什么。我正在使用的代码如下，我所谈论的实时样本位于http://www.gvh.nextcode.com.au

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();

关于相同时钟的问题的第二部分，在http://www.gvh.nextcode.com.au的实时示例网站上，您将看到可以单击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>

Answer 1

通过一遍又一遍地重新定义roatation()，异步callback: rotation将在所有情况下调用最后定义的roatation() - 即与＃34;＃image4＆＃34;相关联的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);，但通过定义可重复使用的单个函数x4，您的源代码将更紧凑。< / p>

试试这个：

{{1}}

jQuery旋转无限运行

1 个答案: