jquery - 动画 .effect() jqueryui 最快点击

Question

最快点击时出现错误tabs，请参见图片：

这是我的js：

jQuery.fn.extend({
    showcontent: function () {
        this.each(function () {
            var options = {
                direction: 'vertical'
            };
            setTimeout(function () {
                $(this).siblings('li').hide();
            }, 2000)
            if ($(this).is(':visible')) {
                $(this).siblings('li').hide();
            } else {
                $(this).siblings('li').hide();
                if (!$(this).is(":animated")) {
                    $(this).toggle("clip", options, 400);
                }
            }
        });
        return this;
    }
});

$("#team1").addClass('tab_over');
$("#team1").click(function (e) {
    e.preventDefault();
    $(this).addClass('tab_over').siblings().removeClass('tab_over');
    $('#c1').showcontent();
    return false;
});
$("#team2").click(function (e) {
    e.preventDefault();
    $(this).addClass('tab_over').siblings().removeClass('tab_over');
    $('#c2').showcontent();
    return false;
});

HTML：

<ul class="x">
    <li id="team1"><a href="#">Misión </a> 
    </li>
    <li id="team2"><a href="#">Visión</a>

    </li>
</ul>
<ul class="y">
    <li id="c1" style="">
        <div>Content 1
            <br />
        </div>
    </li>
    <li id="c2">
        <div>Content 2</div>
    </li>
</ul>

在小提琴：http: //jsfiddle.net/Noranterry/Cam2U/

谢谢！

Answer 1

您需要在快速点击时停止前一个动画中发生的动画。您可以在当前动画的动画上使用stop()$(':animated', '.y').stop(true, true);：在动画当前动画之前。您可以删除timeout

 showcontent: function () {
        this.each(function () {

            var options = {
                direction: 'vertical'
            };
            $(':animated', '.y').stop(true, true);  // Here clear up the previous queues.

演示

问题是，当您为新动画触发动画时，先前的动画仍在队列中，最终两者都完成了动画并且它们都变得可见。使用 stop 和 true 将清除在快速点击期间累积的先前动画的队列。

Answer 2

如果我理解这个问题，您可以选择隐藏属于相应按钮的内容。这将防止按钮粘住。

jQuery.fn.extend({
    showcontent: function () {
        this.each(function () {
            var options = {
                direction: 'vertical'
            };
            setTimeout(function () {
                $(this).siblings('li').hide();
            }, 2000)
            if ($(this).is(':visible')) {
                $(this).siblings('li').hide();
            } else {
                $(this).siblings('li').hide();
                if (!$(this).is(":animated")) {
                    $(this).toggle("clip", options, 400);
                }
            }
        });
        return this;
    }
});

$("#team1").addClass('tab_over');
$("#team1").click(function (e) {
    e.preventDefault();
    $(this).addClass('tab_over').siblings().removeClass('tab_over');
    $('#c1').showcontent();
    $('#c2').hide(0);
    return false;
});
$("#team2").click(function (e) {
    e.preventDefault();
    $(this).addClass('tab_over').siblings().removeClass('tab_over');
    $('#c2').showcontent();
    $('#c1').hide(0);
    return false;
});