2

所以我正在做一个小测验，我想#qWrap在动画运行时禁用对内部所有内容的点击，从而防止垃圾点击。我尝试使用.is(':animated')但没有效果。有任何想法吗？

HTML：

<div id="qWrap">
    <ul id="qBox">
        <!--Q1-->
        <li id="q1" class="qContainer">
            <ul class="qAnswers">
                <li class="qQuestion">
                    <h3>What are italics?</h3>
                </li>
                <li>
                    <a href="#q2" class="mums">
                        <h3>Slanted cut of a type</h3>
                    </a>
                </li>
                <li>
                    <a href="#q2" class="such">
                        <h3>A group of italian-designed typefaces</h3>
                    </a>
                </li>
                <li>
                    <a href="#q2" class="usch">
                        <h3>An other word for the !-sign</h3>
                    </a>
                </li>
            </ul>
        </li>
        <!--Q2-->
        <li id="q2" class="qContainer">
            <ul class="qAnswers">
                <li class="qQuestion">
                    <h3>Who designed Comic Sans?</h3>
                </li>
                <li>
                    <a href="#q3" class="usch">
                        <h3>Mathew Carter</h3>
                    </a>
                </li>
                <li>
                    <a href="#q3" class="usch">
                        <h3>David Carson</h3>
                    </a>
                </li>
                <li>
                    <a href="#q3" class="mums">
                        <h3>Vincent Connare</h3>
                    </a>
                </li>
            </ul>
        </li>
        <!--Q3-->
        <li id="q3" class="qContainer">
            <ul class="qAnswers">
                <li class="qQuestion">
                    <h3>What does Helvetica mean?</h3>
                </li>
                <li>
                    <a href="#q4" class="usch">
                        <h3>From Austria</h3>
                    </a>
                </li>
                <li>
                    <a href="#q4" class="usch">
                        <h3>From Germany</h3>
                    </a>
                </li>
                <li>
                    <a href="#q4" class="mums">
                        <h3>From Switzerland</h3>
                    </a>
                </li>
            </ul>
        </li>
        </li>
    </ul>
</div>

JS：

$('.qAnswers li a').bind('click', function(event) {
    $(this).parent().addClass('selected');
    $(this).closest('.qAnswers').find("li:not(.selected, .qQuestion)").delay(200).addClass('notSelected');
    var $anchor = $(this);

    //preventing click within #qWrap 
    if ($('#qWrap').is(':animated')) {
        $('#qWrap').unbind('click');
    }

    //firing the animation
    $('#qWrap').stop(true, true).delay(800).animate({
        scrollLeft: $($anchor.attr('href')).position().left
    }, 2000, function() {
        nextCount();
    });
    stopTimer();
    addData();
    event.preventDefault();
});
4

2 回答 2

4

您的 JS 代码应如下所示：

$('.qAnswers li a').bind('click', function(event) {
    event.preventDefault();

    //preventing click within #qWrap 
    if ($('#qWrap').is(':animated')) {
        return;
    }

    $(this).parent().addClass('selected');
    $(this).closest('.qAnswers').find("li:not(.selected, .qQuestion)").delay(200).addClass('notSelected');
    var $anchor = $(this);


    //firing the animation
    $('#qWrap').stop(true, true).delay(800).animate({
        scrollLeft: $($anchor.attr('href')).position().left
    }, 2000, function() {
        nextCount();
    });
    stopTimer();
    addData();
});

该代码$('#qWrap').is(':animated')不是在元素动画时触发的事件，而是正常检查。我也把你event.preventDefault();移到了顶部；认为无论如何你都想这样做。您可能还需要移动其他一些东西。

于 2013-03-19T08:07:10.547 回答
0 
$('[where you click]').click(
function(){
    if(!$('[what animates]').is(':animated')){
        $('[what animates]').[your_animation];
    }
});
于 2015-05-13T10:45:55.650 回答