Почему эта анимация jQuery становится длиннее при каждой активации? - PullRequest
Новая
       8

Почему эта анимация jQuery становится длиннее при каждой активации?

0 голосов
/ 15 января 2020

У меня есть jQuery анимация, которая вращает объект при каждом нажатии. Цель анимации проста, при нажатии повернуть объект на 360 градусов в течение определенного периода времени. Затем при следующем нажатии поверните его в противоположном направлении на 360 градусов.

Мой текущий код, кажется, делает это хорошо на первых двух щелчках, но после этого он начинает вращаться больше раз с каждым щелчком.

Я хотел бы знать, почему это происходит, как исправить это с помощью тот же общий подход и, наконец, другие предложения об альтернативных способах получения желаемого эффекта, что может быть проще, но, пожалуйста, сначала ответьте на оригинальные вопросы.

Код можно увидеть по адресу: codepen

Часть jQuery показана ниже: 

var settingSpun = false;

$('#foo').on('click',function(){
  if(settingSpun == false){
    settingSpun = true;
    $('#foo').animate({  borderSpacing: -360 }, {
    step: function(now,fx) {
      $(this).css('-webkit-transform','rotate('+now+'deg)'); 
      $(this).css('-moz-transform','rotate('+now+'deg)');
      $(this).css('transform','rotate('+now+'deg)');
    },
    duration:'slow'
  },'linear');
  }
  else{
    settingSpun = false;
    $('#foo').animate({  borderSpacing: 360 }, {
    step: function(now,fx) {
      $(this).css('-webkit-transform','rotate('+now+'deg)'); 
      $(this).css('-moz-transform','rotate('+now+'deg)');
      $(this).css('transform','rotate('+now+'deg)');
    },
    duration:'slow'
  },'linear');
  }
});

1 Ответ

2 голосов
/ 20 января 2020

Используйте unbind, чтобы он срабатывал только один раз: 

$('#foo')unbind().on('click',function(){

Надеюсь, это поможет

...