Jquery DIV Animation

Question

#main divをアニメーション化して、「作業」がクリックされたときに#header divの上にフェードアウトしてスライドするようにしようとしています。 "または"連絡先 "リンクがクリックされます。何かそれは間違っており、アニメーション化されていません。理由は分かりません。誰も助けることができますか？

http://jsbin.com/odorah/edit#javascript,html,live

私は、理想的には.slideUp/.slideDown機能がために、それは私が使用していますfittextプラグインを妨げる何らかの理由のためになることを知っています。ちょうどFYI

$(document).ready(function(){ 


    $('#workclick').click(function(){ 
         $('#main').animate({top:'-50%', opacity:'1'},{queue:false,duration:500, easing:"easeOutQuart"}); 
        }, function(){ 
         $('#header').animate({top:'0px', opacity:'0'},{queue:false,duration:200}); 
        }); 

        $('#aboutclick').click(function(){ 
             $('#main').animate({top:'50%', opacity:'0'},{queue:false,duration:500, easing:"easeOutQuart"}); 
            }, function(){ 
             $('#header').animate({top:'0px', opacity:'1'},{queue:false,duration:200}); 
            }); 
        $('#contactclick').click(function(){ 
                 $('#main').animate({top:'50%', opacity:'0'},{queue:false,duration:500, easing:"easeOutQuart"}); 
                }, function(){ 
                 $('#header').animate({top:'0px', opacity:'1'},{queue:false,duration:200}); 
                }); 
}); 

Answer 1

あなたの問題を理解しました。最初のクリック機能を次のように置き換えます。

$('#workclick').click(function(){ 
    $('#main').animate(
     {top:'-50%', opacity:'1'}, 
     { 
     queue:false, 
     duration:500, 
     complete:function(){ 
      $('#header').animate(
       {top:'0px', opacity:'0'}, 
       {queue:false,duration:200} 
      ); 
     } 
     } 
    ); 
}); 

後でトランジションを追加できます。つまり、JQueryにはアニメーション機能の2つの形式があります。どちらも完了時にコールバックすることができます。ここで彼らは、次のとおりです。

.animate(properties [, duration] [, easing] [, complete]) 
.animate(properties, options) 

出典：http://api.jquery.com/animate/

編集：jQueryのアニメーションがキューイングされているため、コールバックやキューイングを使用するには、問題を解決します。 jQueryは同期アニメーションを作成できません。https://stackoverflow.com/a/1594085/844728

P.S. .animateへのすべての呼び出しを修正して、このエラーを修正する必要があります。