jQuery的點擊回調

Question

我有一個是通過「喀嗒」處理觸發jQuery函數：

$('#showDatesCheckbox').click(function(){ 
    var table = $('#planningViewTable').find('tr'); 
    if ($('#showDatesCheckbox').is(':checked')) { 
     table.find('.textDate').stop().animate({ 
      "opacity": 1 
     }, 1000); 
     table.find('.inlineTextDate').stop().animate({ 
      "opacity": 1 
     }, 1000); 
    } 
    else { 
     table.find('.textDate').stop().animate({ 
      "opacity": 0 
     }, 1000); 
     table.find('.inlineTextDate').stop().animate({ 
      "opacity": 0 
     }, 1000); 
    } 
}); 

我想有一個AJAX負載指示動畫，所以我需要它來顯示當點擊觸發，並隱藏在操作完成的時候，所以我的數字回調但它似乎並沒有工作，當我將它設置如下：

$('#showDatesCheckbox').click(function(){ 
      $('#planningView').mask('Loading...'); 
    var table = $('#planningViewTable').find('tr'); 
    if ($('#showDatesCheckbox').is(':checked')) { 
     table.find('.textDate').stop().animate({ 
      "opacity": 1 
     }, 1000); 
     table.find('.inlineTextDate').stop().animate({ 
      "opacity": 1 
     }, 1000); 
    } 
    else { 
     table.find('.textDate').stop().animate({ 
      "opacity": 0 
     }, 1000); 
     table.find('.inlineTextDate').stop().animate({ 
      "opacity": 0 
     }, 1000); 
    } 
}, 
    $('#planningView').unmask(); 
); 

Answer 1

click事件立即觸發，持續時間爲0，因此它沒有任何回調。

但是你正在使用，animate，確實有一個持續時間，所以它有一個回調。然後，您的回調函數應該是.animate內：

$('#showDatesCheckbox').click(function(){ 
    $("#foo").animate({ opacity: 1 }, 1000, function(){ 
     // your callback 
    }); 
}); 

但是，你正在使用多個動畫，所以我想你想在所有這些動畫完成「動畫」被稱爲回調函數。這裏就是我會做：

$('#showDatesCheckbox').click(function(){ 
    var callback_count = 2; // the number of animates you do before you want to actually call your callback function 
    var yourCallbackFunction = function(){ 
     if(--callback_count <= 0){ 
      // your callback 
     } 
    } 
    $("#foo").animate({ opacity: 1 }, 1000, yourCallbackFunction); 
    $("#bar").animate({ opacity: 1 }, 1000, yourCallbackFunction); 
}); 

有一個你應該知道更多的事情：打電話.animate改變不透明性是很大的，但是如果你只改變透明度，只有那的確是一個方法，並且還具有回調：fadeIn()和​​。

Answer 2

試試這樣說：

$('#showDatesCheckbox').click(function(){ 
$('#ajaxgif').fadeIn(); 
var table = $('#planningViewTable').find('tr'); 
if ($('#showDatesCheckbox').is(':checked')) { 
    table.find('.textDate').stop().animate({ 
     "opacity": 1 
    }, 1000); 
    table.find('.inlineTextDate').stop().animate({ 
     "opacity": 1 
    }, 1000); 
} 
else { 
    table.find('.textDate').stop().animate({ 
     "opacity": 0 
    }, 1000); 
    table.find('.inlineTextDate').stop().animate({ 
     "opacity": 0 
    }, 1000); 
};$('#ajaxgif').fadeOut(); 
}); 

編輯：對不起，這是行不通的，因爲該腳本將繼續進行，而不是等到動畫完成。 Pioul的回答是正確的，您必須使用animate()的回叫選項