jQuery DIV 动画

Question

我正在尝试为我的#main div 设置动画，以便在单击“工作”时它淡出并滑过我的#header div 顶部，然后在单击“关于”或“时淡出并向下滑动”单击“联系”链接。出了点问题，它没有动画。不知道为什么。有人可以帮忙吗？

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

我知道理想情况下 .slideUp/.slideDown 函数应该是有序的，但由于某种原因，它会干扰我正在使用的 fittext 插件。仅供参考

$(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 函数。两者都允许您在完成时回调。他们在这里：

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

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

编辑：使用回调或排队可以解决问题，因为 JQuery 动画是排队的。 jQuery无法制作同步动画，见：https://stackoverflow.com/a/1594085/844728

附：您必须修改对 .animate 的所有调用，更正此错误。