演示是here。

Question

我的代码存在问题。我有一个.click函数，我想在动画中禁用它（以防止快速点击）。我测试了我在互联网上发现的一切。谢谢你的帮助！

$('#content').click(function() {

    if($('#content').hasClass('closed')){
            $('#content').animate({
            height: '300px',
            }, 1000, 'easeInQuint', function() {
            $('#content').css("background-image", "url(http://torm.vot.pl/breitenbach/templates/breitenbachmedia/images/arrows_down.png)");
            });
            $('#content').removeClass('closed');
            $('#content').addClass('open');
        } 



    else {
            $('#content').animate({
            height: '150px',
            }, 1000, 'easeInQuint', function() {
            $('#content').css("background-image", "url(http://torm.vot.pl/breitenbach/templates/breitenbachmedia/images/arrows.png)");

            });
            $('#content').removeClass('open');
            $('#content').addClass('closed');

        }       
});

Answer 1

您可以尝试使用这样的标志：

var stopClick = false;
$('#content').click(function () {
    if(stopClick) return;
    stopClick = true;
    if ($('#content').hasClass('closed')) {
        $('#content').animate({
            height: '300px',
        }, 1000, 'easeInQuint', function () {
            $('#content').css("background-image", "url(http://torm.vot.pl/breitenbach/templates/breitenbachmedia/images/arrows_down.png)");
            stopClick = false;
        });
        $('#content').removeClass('closed');
        $('#content').addClass('open');
    } else {
        $('#content').animate({
            height: '150px',
        }, 1000, 'easeInQuint', function () {
            $('#content').css("background-image", "url(http://torm.vot.pl/breitenbach/templates/breitenbachmedia/images/arrows.png)");
            stopClick = false;
        });
        $('#content').removeClass('open');
        $('#content').addClass('closed');
    }
});

Answer 2

由于动画要防止这种情况，您可以使用.is(':animated')：

$('#content').click(function() {
    if(!$('#content').is(':animated')){ // If the element is not animate, do something.
        if($('#content').hasClass('closed')){
            $('#content').animate({
                height: '300px',
            }, 1000, 'easeInQuint', function() {
                $('#content').css("background-image", "url(http://torm.vot.pl/breitenbach/templates/breitenbachmedia/images/arrows_down.png)");
            });
            $('#content').removeClass('closed');
            $('#content').addClass('open');
        } 



        else {
            $('#content').animate({
                height: '150px',
            }, 1000, 'easeInQuint', function() {
                $('#content').css("background-image", "url(http://torm.vot.pl/breitenbach/templates/breitenbachmedia/images/arrows.png)");

            });
            $('#content').removeClass('open');
            $('#content').addClass('closed');

        }  
    }
});

Answer 3

您可以通过以下方式简化页面：为open和closed类添加css

#content{
    height:150px;
}

#content.open {
    background: url("http://torm.vot.pl/breitenbach/templates/breitenbachmedia/images/arrows.png");
}

#content.closed {
    background: url("http://torm.vot.pl/breitenbach/templates/breitenbachmedia/images/arrows_down.png");
}

然后，使用toggleClass("closed open")您可以更改背景。

最后，您可以使用$this.is(":animated")选择器检查当前元素是否为jQuery.animate()设置动画

所以，对于这个html

<div id="content"
    class="closed">
</div>

，之前描述的css和以下JavaScript：

$(document).on('click', '#content', function() {
    var $this = $(this);

    if(!$this.is(":animated")){
        $this.animate({
                height: $this.hasClass('closed') ? "300px" : "150px"
            },
            500,
            'easeInQuint',
            function() {
                    $this.toggleClass("closed open");
            }
        );
    }
});

您可以满足您的要求。

演示是here。

Answer 4

如果任何人都可以在其项目中添加一些精美的插件，那么我会推荐Ladda [带有内置加载指示器的按钮，有效地弥补了行动与反馈之间的鸿沟]。

这不仅会在DOM元素上显示加载指示器，而且还会解决快速点击问题

jQuery阻止快速点击

4 个答案:

演示是here。