Сделать div одним щелчком мыши только один раз

Question

У меня есть функция, которая при щелчке div продолжает анимацию. , и я хочу, чтобы пользователь мог нажимать только один раз, чтобы не загружать эту анимацию при каждом нажатии. Может быть, ДИВ интерактивными один раз или, если в функции, но я не то, что хорошо в коде :)

это код

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

Вы можете использовать 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 3

использование JQuery один()

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

}) 

Answer 4

Существует .one метод JQuery для один раз при клике.

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

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

    }); 

Answer 5

Вы можете использовать :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); 
}); 

Answer 6

Вы можете попробовать .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); 
    });