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

Question

在选项卡中最快单击时出现错误，请参阅图片:

这是我的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>

fiddle :http://jsfiddle.net/Noranterry/Cam2U/

谢谢!

Answer 1

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

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

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

Demo

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