jquery動畫onStart回調

Question

jquery動畫方法是否有onStart回調。我知道完整的回調，但沒有看到任何地方使用onStart或初始化等其他回調。

我想onStart回調，因爲當我調用animate（）時，它可能無法立即啓動，但由於先前的動畫沒有完成而排隊。

Answer 1

一旦您調用animate方法，它將在您的其他javascript代碼正在運行時運行。所以相當於有一個onStart回調會把你想要運行的代碼立即放到animate方法之後。此外，還有一個「步驟」功能可以使用.. http://api.jquery.com/animate/#step ..我還沒有使用它，但似乎您可以檢查您正在使用的初始CSS值，並僅基於該值執行代碼。如果您要動畫很多部分，可能會出現性能問題。

Answer 2

在啓動時，您炒掉動畫

function onStart(){ 
    $('.box').animate({left:100},500,onComplete()) 
} 
function onStart() 

Answer 3

我已經在過去使用這種方法，它似乎工作得很好發生。希望它可以爲你工作。

編輯（2016年12月6日 - 的要求是什麼OP更好的例子）

HTML：

<div class="tile">X</div> 

CSS：

body { 
    position: relative; 
} 

.tile { 
    position: absolute; 
    display: block; 
    padding: 20px; 
    background: aqua; 
    text-align: center; 
    font-size: 32px; 
    font-family: sans-serif; 
} 

的JavaScript：

function doMe() { 
    console.log('We called a callback function!'); 
} 

$('#tiles .tile').animate({ 
    'left': '+=500px' 
}, { 
    duration: 6000, 
    step: function(now, fx) { 
    var data = $(this).data('anistart'); 
    if (!data) { 
     console.log('We started!'); 
     $(this).data('anistart', { 
     start: fx.start, 
     end: fx.end 
     }); 
     doMe(); 
    } 
    console.log('We\'re stepping...'); 
    }, 
    complete: function() { 
    var data = $(this).data('anistart'); 
    if (data.end !== parseFloat($(this).css('left'))) { 
     $(this).css('left', data.end); 
    } 
    $(this).removeData('anistart'); 
    console.log('We ended!'); 
    } 
}); 

在步驟功能上，我正在測試看看對象是否有先前設置的數據。如果不是我設置它，然後我們可以調用/處理任何東西（即你的回調）

關於完整的功能，我確保位置是它應該是，如果沒有，我設置它。你很可能會放棄測試並設置它，但不知道哪一個更受打擊（檢查或CSS集）。

所以無論如何，你在開始時設置一個變量，如果它沒有設置，那麼你知道它的第一次...即它被初始化。

DEMO：Example of jQuery animate onStart callback

Answer 4

.animation()有一個無證start選項

$('.box').animate({left:100},{ 
    duration:500, 
    start:function(){ 
     console.log('start'); 
    }, 
    complete:function(){ 
     console.log('end'); 
    } 
}); 

Answer 5

簡單的方法

我不是很有經驗，但是這是要走的路。

只需在動畫之前插入css方法。

像這樣：

$(this).css({ "display": "block", "opacity": "0" }) 
     .animate({ "opacity": "1" }, 200);