Question

我对jQuery很新，这将是我使用它的第一个项目之一。我已经完成了大部分工作并按照我的需要进行工作。

我遇到的一个问题是，当处于活动状态时单击导航项时，两个并排面板不会同时动画回原始状态。

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

我希望两者同时滑回来，有人知道我可以用来做这个的任何方法吗？

$(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.强制动画在动画为0之前停止

示例os解决方案2：

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

jQuery .slideUp在.animate之前执行

1 个答案: