jQuery .slideUp 在 .animate 之前执行

Question

我对 jQuery 相当陌生，这将是我使用它的第一个项目之一。我已经完成了大部分工作，并按照我需要的方式工作。

我遇到的一个问题是，当在事件状态下单击导航项时，两个并排面板不会同时以动画方式恢复到原始状态。

标有“服务”的左侧面板正在使用 .slideUp。右侧面板标记了已选择的导航项并正在使用 .animate。

我希望两者同时向上滑动，有人知道我可以使用什么方法来做到这一点吗？

JSFIDDLE

$(document).ready(function() {

$('nav a').bind('click', function() {

    var page = $(this).attr('rel');
    var pageElement = $('#' + page);

        // slide down services box
        $("#slide-down").animate({
            "height": "240px"
        });

            // create div for service content
            $("#pages-wrap").slideDown();

    if($(pageElement).hasClass('open')) {

        // This page is already open, so just close it
            $('#pages div.open').slideUp().removeClass(); 
            $("#pages-wrap").slideUp();
            $('#slide-down').animate({"height": "100px"});

        } else {
            // This page is not open
            if($('#pages div.open').length > 0) {
                // There are other pages open, close them then open new one
                $('#pages div.open').removeClass('open').fadeOut(function() {
                $('#pages div#' + page).fadeIn().addClass('open');
                });

            } else {
                // No other pages open, just open this one
                $('#pages div#' + page).slideDown().addClass('open');
            }
        }
   });

});

Answer 1

出现此问题的原因是每次单击按钮时都会使 div 的动画高度达到 240px。只有完成此动画后才会开始动画到 0。

解决办法有两种:1.你可以检查面板是否关闭，然后才动画2.在animate到0之前强制动画停止

示例操作系统解决方案 2:

$('#slide-down').stop().animate({"height": "100px"});