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

将类目标添加到服务元素，如

<div id="services">
    <div class="design target">some text</div>
    <div class="development target">some text</div>
    <div class="branding target">some text</div>
    <div class="mobile target">some text</div>
</div>

然后

jQuery(function ($) {
    var $targets = $('#services .target');
    var $cirlces = $('#about .circle').click(function (e) {
        $(this).addClass('enabled');
        var $target = $('.' + this.id).stop(true).slideDown();
        $targets.not($target).stop(true).slideUp();
    });
});

演示：Fiddle

Answer 2

尝试以下

        //First time it has to SlideUp
        $('#about .circle').addClass("enabled");

        //Click event
        $('#about .circle').click(function (e) {
            var $this = $(this);

            $("." + $this[0].id + "").slideToggle('slow', function () {
                $this.toggleClass('enabled');
            });               
        });

Answer 3

您需要检查是否存在需要隐藏的可见元素：

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

代码的粗略轮廓：

// 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

切换类和向下滑动

3 个答案: