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（事件）

$('#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

您可以使用one()方法作为@Azim建议，或者如果您想在请求新动画后结束动画，则可以使用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（）

<ng-map id="map" default-style="true" center="-25.363882,131.044922" zoom="4">
      <marker id="marker1" position="-25.363882,131.044922"
        on-click="map.showInfoWindow('bar')">
      </marker>
      <info-window id="bar">
        <div ng-non-bindable>
          Bla bla
        </div>
      </info-window>
</ng-map>

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);
});

使div只能点击一次

6 个答案: