动画.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

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

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

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

Demo

问题是当您触发新动画的动画时，前一个动画仍在队列中，最终两个动画都完成了动画，并且两个动画都变得可见。使用stop with 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;
});