javascript - 切换类别并向下滑动

Question

我正在寻找解决此问题的最佳方法，这是我的 html:

            <div class="section group">
                <article class="col span_1_of_4">
                    <h3>Design</h3>
                    <div id="design" class="circle">
                        <div class="icon icon-pencil"></div>
                    </div>                              
                </article>
                <article class="col span_1_of_4">
                    <h3>Development</h3>
                    <div id="development" class="circle">
                        <div class="icon icon-code"></div>
                    </div>
                </article>
                <article class="col span_1_of_4">
                    <h3>Branding</h3>
                    <div id="branding" class="circle">
                        <div class="icon icon-tag"></div>
                    </div>
                </article>
                <article class="col span_1_of_4">
                    <h3>Mobile</h3>
                    <div id="mobile" class="circle">
                        <div class="icon icon-mobile-phone"></div>
                    </div>
                </article>  
            </div>
            <div id="services">
                <div class="design">
                    some text
                </div>
                <div class="development">
                    some text                   
                </div>
                <div class="branding">
                    some text                   
                </div>
                <div class="mobile">
                    some text                   
                </div>
            </div>

还有我的 JavaScript:

$('#about .circle').click(function(e) {
    if ($('#about .circle').hasClass('enabled')) {
        $('.design, .development, .branding, .mobile').slideUp();
    }
    if ($(this).hasClass("enabled")) {
        $(this).removeClass("enabled");
    } else {            
        $('#about .circle').removeClass("enabled"); 
        $(this).addClass("enabled");
        $('.'+$(this).attr('id')).slideDown();
    }
});

我只是希望当您单击圆圈时它可以切换圆圈下方文本上的类。我希望它上下滑动，但如果您单击另一个圆圈，我希望它向上滚动，然后完成动画，然后向下滚动。目前它同时滑动它们。我知道你可以传递一个完整的函数来向上滑动，使其仅在完成时向下滑动，但它不起作用。

如果有人知道更好的方法请告诉我!

谢谢

Answer 1

您需要检查是否有需要隐藏的可见元素:

• 如果有，则隐藏它并在隐藏动画完成时显示下一个元素
• 如果没有则下一个元素

代码的大致轮廓:

// hide elements on page load
$("#services > div").hide();
$("#about .circle").click(function (e) {
    var classToShow = "." + $(this).attr("id");
    // do nothing if element is already visible
    if ($("#services > div" + classToShow + ":visible").length) {
        return;
    }
    // stop existing animations
    if ($("#services > div:animated").length) {
        $("#services > div:animated").stop();
    }
    // if an element needs to be hidden
    if ($("#services > div:visible").length) {
        // hide it
        $("#services > div:visible").slideUp("slow", function () {
            // show next element when first animation completes
            $("#services > div" + classToShow).slideDown("slow");
        });
    } else {
        // just show next element
        $("#services > div" + classToShow).slideDown("slow");
    }
});

Demo here