使 div 只能单击一次

Question

我有一个函数，当单击div 时，动画会继续。我希望用户只能单击一次，而不是在每次单击时加载该动画。也许是一次可点击的div或函数中的if，但我在代码:)方面不是那么好

这是代码

$(function() {    
    $('#valerie').click(function() {
        $('.logo').animate({
            'left': 3 + '%'
        }, 900);
        $('#title2').animate({
            'font-size': 40 + 'px',
            'top': 42 + '%'
        }, 900);
        $('body').css({
            'overflow': "auto"
        }, 20);
    });
});

Answer 1

使用 jQuery .one((。

$('#valerie').one('click', function() {
    $('.logo').animate({'left':  3    + '%'},900);
    $('#title2').animate({'font-size': 40 + 'px','top': 42 + '%'},900);
    $('body').css({'overflow': "auto" },20);
});

Answer 2

您可以在该事件的逻辑之后尝试 .off(event(

$('#valerie').on('click', function () {
        $('.logo').animate({
            'left': 3 + '%'
        }, 900);
        $('#title2').animate({
            'font-size': 40 + 'px',
            'top': 42 + '%'
        }, 900);
        $('body').css({
            'overflow': "auto"
        }, 20);
        $(this).off(event);
    });

Answer 3

您可以按照

@Azim建议使用one()方法，或者如果您想在请求新动画后使动画结束，可以使用stop()：

$('#valerie').on('click', function() {
    $('.logo').stop().animate({
        'left': 3 + '%'
    }, 900);
    $('#title2').stop().animate({
        'font-size': 40 + 'px',
        'top': 42 + '%'
    }, 900);
    $('body').css({
        'overflow': "auto"
    }, 20);

});

这是因为我不确定您只需要一次动画，或者您需要避免结束后的多个动画。

Answer 4

使用 jquery one((

$('#valerie').one('click', function() {
})

Answer 5

jquery 中有一个 .one 方法用于一次性点击事件。

$('#valerie').one('click', function() {
    $('.logo').animate({
        'left': 3 + '%'
    }, 900);
    $('#title2').animate({
        'font-size': 40 + 'px',
        'top': 42 + '%'
    }, 900);
    $('body').css({
        'overflow': "auto"
    }, 20);
   });

Answer 6

您可以使用:animated：

$('#valerie').click(function() {
    if($(':animated').length || $('body').css('overflow') === "auto"){// <---add this 
        return; 
    }  
    $('.logo').animate({'left':  3    + '%'},900);
    $('#title2').animate({'font-size': 40 + 'px','top': 42 + '%'},900);
    $('body').css({'overflow': "auto" },20);
});