jqueryのクリックコールバック

Question

私は「クリック」ハンドラによってトリガされたjQueryの機能があります：私はAJAXロードインジケータアニメーションを持っていると思った

$('#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); 
    } 
}); 

を、私はクリックがトリガされたときに表示するためにそれを必要とします、および操作が完了したときに隠れるので、私はコールバックを把握しかし、次のように私はそれを設定するときには、動作していないようです：

$('#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を呼び出すことは素晴らしいですが、あなただけの不透明度を変更した場合、それだけではない方法がある、ともAありコールバック：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(); 
}); 

はEDIT：スクリプトはアニメーションが完了するまで待って進まなくなりますので、申し訳ありませんが、これは動作しません。 Pioulの答えは正しいです、あなたはanimate()