jQuery .slideUp 在 .animate 之前执行答案

【问题标题】：jQuery .slideUp executing before .animatejQuery .slideUp 在 .animate 之前执行
【发布时间】：2013-09-08 05:04:06
【问题描述】：

我对 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');
            }
        }
   });

});

【问题讨论】：

标签： jquery jquery-animate sliding panels

【解决方案1】：

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

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

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

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

【讨论】：