Jquery DIV動畫

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有兩種形式的動畫功能。兩者都允許您在完成時回調。在這裏，他們是：

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

來源：http://api.jquery.com/animate/

編輯：使用回調或排隊解決問題，因爲JQuery的動畫進行排隊。 jQuery無法制作同步動畫，請參閱：https://stackoverflow.com/a/1594085/844728

P.S.您必須將所有呼叫修改爲.animate，並更正此錯誤。