Jquery .animate（）在第二次觸發它時不起作用

Question

我正在制作幾個物體的旋轉木馬。 它應該旋轉旋轉木馬，因此當我單擊下一個/上一個按鈕時，下一個對象就會聚焦。 我第一次單擊其中一個按鈕時，它會慢慢為旋轉設置動畫，但是在下一次單擊時，它只是因為某種原因而沒有動畫而更改了對象。 它應該每次點擊都有動畫，但它只在每次重新加載頁面后第一次執行。

這是一個jsfiddle： https ：//jsfiddle.net/sxybreak/jouevx28/1/

這是我的代碼：

$(document).ready(function() {
    var angle;
    var i = 0;

    $("#previous").on('click', function() {

        i+=1;

        $("#carousel").animate({borderSpacing: 40}, {
            duration: 'slow', 
            step: function(now, fx) {

                $(this).css({
               'transform': 'rotateY(' + (i*now) + 'deg)',
               '-webkit-transform': 'rotateY(' + (i*now) + 'deg)',
               '-moz-transform': 'rotateY(' + (i*now) + 'deg)',
               '-ms-transform': 'rotateY(' + (i*now) + 'deg)' });
        }
     });
  });


  $("#next").click(function() {

    i-=1;

    $("#carousel").animate({borderSpacing: 40}, {
      duration: 'slow',
      step: function(now, fx) {

        $(this).css({
            'transform': 'rotateY(' + (i*now) + 'deg)',
            '-webkit-transform': 'rotateY(' + (i*now) + 'deg)',
            '-moz-transform': 'rotateY(' + (i*now) + 'deg)',
            '-ms-transform': 'rotateY(' + (i*now) + 'deg)' });
      }
    });
  });
});

Answer 1

這是因為您正在設置border-spacing屬性的設置。 動畫完成后，邊框間距為40，因此無需動畫。

Answer 2

我沒有嘗試過運行它。但是動畫第二次沒有工作的一個原因是因為動畫的自然排隊。 只需在選擇器后使用.stop（），如

$（本）.stop（）

訪問此鏈接以了解更多信息http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

可能會幫助其他用戶訪問此頁面，就像我一樣。

Answer 3

你基本上是使用step函數制作自定義動畫，對吧？ 所以在第一次轉換中borderSpacing為0 。 通過在每個步驟中調用自定義動畫，可將其設置為40 。

但是在下一次單擊borderSpacing仍然是40 。 所以沒有什么可以動畫的，這就是為什么它只是添加transform而不做任何動畫。

一個簡單的解決方案是將borderSpacing值重置為"+40" （上一個）和"-40" （下一個）並在動畫中使用它。

示例：

$("#previous").on('click', function () {

    i += 1;

    $("#carousel").animate({
        borderSpacing: "+=40"
    }, {
        duration: 'slow',
        step: function (now, fx) {
            $(this).css({
                    'transform': 'rotateY(' + (now) + 'deg)',
                    '-webkit-transform': 'rotateY(' + (now) + 'deg)',
                    '-moz-transform': 'rotateY(' + (now) + 'deg)',
                    '-ms-transform': 'rotateY(' + ( now) + 'deg)'
            });
        }
    });
});

JSFiddle顯示工作示例： https ：//jsfiddle.net/jouevx28/3/