jQueryコールバック+ js関数

Question

こんにちは、私はjs関数とjQuery関数を組み合わせていくつかの問題を抱えています。以下のコードは動作しますが、あなたが推測している可能性があるとして、私はその後、最初にフェードHTMLを変更して、再びフェードインするために期待しています。

function updateit(a) { 
    $("#monthlyHead").fadeOut(100); 
    $("#monthlyText").fadeOut(100); 

    if (a == 1) { 
     $("#monthlyHead").html(headone); 
     $("#monthlyText").html(textone); 
    } 
    else if (a == 2) { 
     $("#monthlyHead").html(headtwo); 
     $("#monthlyText").html(texttwo); 
    } 

    $("#monthlyHead").fadeIn(900); 
    $("#monthlyText").fadeIn(900); 
} 

が

Answer 1

function updateIt(a){ 
    $("#monthlyHead,#monthlyText").fadeOut(100,function(){ 
      if (a == 1) { 
       $("#monthlyHead").html(headone); 
       $("#monthlyText").html(textone); 
      } else if (a == 2) { 
      $("#monthlyHead").html(headtwo); 
      $("#monthlyText").html(texttwo); 
      } 

     $(this).fadeIn(900); 
    }); 
} 

Answer 2

フェードアウト、フェードイン、およびすべてのjQueryのアニメーションの方法は取りますアニメーションが完了したときに実行されるオプションの 'callback'引数。それはあなたがここで使うべきものです。だから、：

$("#monthlyHead").fadeOut(100, function() { 
    if (a == 1) { 
     $("#monthlyHead").html(headone); 
    } 
    else { 
     $("#monthlyHead").html(headtwo); 
    } 
    $("#monthlyHead").fadeIn(900); 
}); 

Answer 3

簡体DEMOここ

この

function updateit(a) { 

    $("#monthlyHead").fadeOut(100, function() { 
     if (a == 1) { 
      $("#monthlyHead").html(headone); 
     } else if (a == 2) { 
      $("#monthlyHead").html(headtwo); 
     } 

    }).fadeOut(900); 

    $("#monthlyText").fadeOut(100, function() { 
     if (a == 1) { 
      $("#monthlyText").html(textone); 
     } else if (a == 2) { 
      $("#monthlyText").html(texttwo); 
     } 

    }).fadeOut(900); 
} 

Answer 4

を試してみてください、あなたは次のような構成を試したことがありますか？

$(selector).fadeOut(100, function(){ 
    $(selector2).html(text); 
    $(selector).fadeIn(900); 
});