Jquery animate（），防止動畫

作爲調用jQueryanimate函數的一部分，有時候我想阻止動畫。作爲animate函數的一部分，是否有辦法阻止動畫？比如用before屬性？Jquery animate（），防止動畫

我願做這樣的事情：

$('#myMovingDiv').animate(
{ 
    before: // RUN A FUNCTION, IF FUNCTION RETURNS TRUE, CANCEL ANIMATION 
    left: '+=100' 
} 
, 1000, function(){});

爲了解決下面的評論，我不能只是做一個if有生之前，因爲生命的改變if的值，如果動畫未完成，則不符合if條件。示例 -

//THIS WILL NOT WORK IF ANIMATION IS NOT FINISHED BEFORE 2ND CLICK 
$("#myClickableDiv").click(function() { 
    if (document.getElementById(myMovingDiv').offsetLeft == 0) { 

     $('#myMovingDiv').animate({ 
      left: '+=850' 
     }, 400, function() { 
     // Animation complete. 
     }); 

    }; 
});

來源

2013-07-04 A Bogus

取決於你正在嘗試做什麼。如果這是防止動畫的問題，在這種情況下left，那麼您可以使用jQuery animate的step function。

$(function() { 
    $('button').click(function() { 
     $('#myMovingDiv').animate({ 
      left: '+=100' 
     }, { 
      step: function (now, fx) { 
       if(parseInt(now) > 20){ 
        $(this).stop(); 
        fx.end = fx.start; //prevents div from moving 
       } 
      } 
     }, 
     1000); 
    }); 
});

DEMO： http://jsfiddle.net/qhzVm/3/

來源

2013-07-04 03:55:03 Dom

謝謝Dom！這對我有效。 –

我不認爲這是有可能這樣，但你可以開發使用.filter()

$('#myMovingDiv').filter(function(idx, el){ 
    return true;// or false based on condition 
}).animate({ 
    left: '+=100' 
}, 1000, function() {});

溶液或你爲什麼不將動畫的方法前加上一個if條件被稱爲

if(condition){ 
    $('#myMovingDiv').animate({ 
     left: '+=100' 
    }, 1000, function() {}); 
}

來源

2013-07-04 03:38:08

+1 - 非常乾淨和固溶體 – Dom

感謝阿倫，但還是有，因爲我在我的問題提了同樣的問題。（我已經添加了其他信息）。動畫完成前的多次點擊導致此操作不起作用。 –

我認爲這是一個奇怪的resquest因爲你可以做一個if，但如果你是絕對想before選項，地方把這個腳本在你的代碼：

(function($){ 
    $.fn.oldAnim = $.fn.animate; 
    $.fn.animate = function(){ 
     var args = arguments; 
     if(typeof args[1] == 'object'){ 
      if(args[1].before){ 
       var callBefore = args[1].before().apply(this); 
       if(callBefore || callBefore == undefined){ 
        return this.oldAnim.apply(this, args); 
       }else{ 
        return this; 
       } 
      } 
     } 
     return this.oldAnim.apply(this, args); 
    } 
})(jQuery)

然後你將有一個before選項。返回false，0，null或空字符串將取消動畫。但是，返回undefined將觸發動畫。

你可以把它像：

$('selector').animate({'hegit' : 'value'}, {before : function(){}, complete : function(){} /*etc, etc*/})

小提琴：http://jsfiddle.net/cWC5B/1/

來源

2013-07-04 04:22:25

感謝您的回覆卡爾安德烈，你的代碼給我一個錯誤雖然 - 對象＃有沒有方法'適用' –

Jquery animate（），防止動畫

回答

相關問題