jquery load animations

Question

jQueryの読み込みとフェードインとフェードアウトのアニメーションを使いこなしていますが、どうやって一緒に作業するかは分かりません。

私は、次の月をクリックするたびに#ajaxdivのwhatsをカレンダーに置き換える機能を持っています。それはアニメーションを持っていませんが、それは素晴らしい作品です。

function ajaxCalendar(X,Y,Z){ 
var changemonthlink = "http://localhost:8888/myproject/calendar/view/" + X + "/" + Y + "/" + Z + "/1"; 
$("#ajaxdiv").load(changemonthlink); 
return false;  
}; 

は今（それが実現することはかなり簡単だ場合）、私が何をしたいのですがどのような/フェードのdivの左または右の内容をスライドさせ、その後、/スライド左または右に新しいコンテンツをロードすることです。どんな助けも素晴らしいだろう。

私はこれをやったが動作しません。ブラウザはリンクにナビゲートします...

function ajaxCalendar(X,Y,Z){ 
      $('#ajaxdiv').hide('slow',loadContent()); 
      return false;  
}; 

function loadContent() { 
    var changemonthlink = "http://localhost:8888/myproject/calendar/view/" + X + "/" + Y + "/" + Z + "/1"; 
    $('#ajaxdiv').load(changemonthlink,'',showNewContent()); 
}; 


function showNewContent() { 
     $('#ajaxdiv').show('normal'); 
}; 

私はこれにこれを再配置しました。最初の非表示アニメーションは動作していますが、それはそれです。 divはこれまでどおりバックアップを表示しません。

function ajaxCalendar(X,Y,Z){ 
      $('#ajaxdiv').hide('slow',loadContent()); 

      function loadContent() { 
       var changemonthlink = "http://localhost:8888/myproject/calendar/view/" + X + "/" + Y + "/" + Z + "/1"; 
       $('#ajaxdiv').load(changemonthlink,'',showNewContent()); 
      } 

      function showNewContent() { 
        $('#ajaxdiv').show('normal'); 
      } 

      return false; 

}; 

最新機能ですがタイミングがオフです。カレンダーの読み込みは、fadeOut（）が完了する前に実行されています。私はload（）関数の直前に遅延（300）を入れようとしましたが、最初のフェードアウトが遅れました。

function ajaxCalendar(X,Y,Z){ 
      $('#ajaxdiv').fadeOut('300',loadContent()); 

      function loadContent() { 
       var changemonthlink = "http://localhost:8888/myproject/calendar/view/" + X + "/" + Y + "/" + Z + "/1"; 
       $('#ajaxdiv').load(changemonthlink,'',function(){ 
        $('#ajaxdiv').fadeIn('300'); 
       }); 
      } 

      return false; 

}; 

Answer 1

代わりshow()とhide()

のfadeIn()と​​への切り替えを試してみて、あなたはあなたの関数のパラメータを解析していることを確認してください。

と$.getの代わり.loadを使用して...

function ajaxCalendar(X, Y, Z) { 
    var changemonthlink = "/css/normalize.css"; //test url only {css file on same domain} 

    $.get(changemonthlink, function(data) { 
     $('#ajaxdiv').fadeOut('normal',function(){$('#ajaxdiv').html(data);}); 
     $('#ajaxdiv').fadeIn('normal'); 
    }).error(function(a, b, c) { 
     alert(b + ' : ' + c); 
    }); 
} 

は私の例を参照してください、私の次のコードを参照してください。http://jsfiddle.net/8E7vk/2/

Answer 2

がhttp://api.jquery.com/jQuery.ajax/ を試してみてくださいしかし、falseにパラメータasyncを設定します。