JavaScript/Jqueryのアニメーション

Question

JavaScriptとjqueryのlibがどのように動作するか少し混乱します。例。クリックイベントで 私は自分のイメージをフェード変更ソースにしてからフェードインしたいと思っています。私は頭の中でこれがうまくいくはずだと考えました。 1つのコードを実行してから、次のコードを実行します。コードを切り替えて実行する傾向があります。なぜこのようなことが起こっているのか、解決策があるのか​​理解できるようになります。

$('.under_box').click(function(){ 
var main_source=$(this).attr("src"); 
$("#main_image").fadeTo(300,0); 
$("#main_image").attr("src",main_source).queue(); 
$("#main_image").fadeTo(500,1); 

Answer 1

これらの関数は、次のコード行が始まる前に完了するのを待たないという点で、非同期になる傾向があります。あなたはこのようにコールバック関数を使用して試すことができます：

$("#main_image").fadeTo(300,0, function(){ 
     $("#main_image").attr("src",main_source).queue(); 
     $("#main_image").fadeTo(500,1); 
    }); 

アイデアがfadeToが完了したときにコールバック関数が実行されるということです。

Answer 2

JavaScryptは非ブロッキングであることが知られているので、何かの後に何かをするのを待っている場合は、この場合は最良の方法でコールバックを設定します。また

$(function(){ 
    var main_image = $("#main_image"); 
    $('.under_box').on('click', function(){ 
     var main_source=$(this).attr("src"); 
     main_image.fadeTo(300,0, function(){ 
      main_image.attr("src",main_source); 
      main_image.fadeTo(500,1); 
     }); 
    }); 
}); 

、あなたはそれをすべての時間をフェッチするのではなく、メモリにjQueryオブジェクトを保持します。この方法

var $main_image = $("#main_image"); 

を保存し、DOMにあなたのジャンプを減らす必要があることに注意してください。