Toggle click to 4 time работает нормально, но после 6-го клика не работает

Question

Сначала нажмите на ссылку 1, она переместится на 100 пикселей вправо, и стрелка покажет.
Второй нажмите на ссылку 2, она переместится на 100 пикселей вправо, ссылка 1 переместится назад и пока не появится стрелка.
Третий щелчок на ссылке 3 , он перемещается на 100px вправо, ссылка 2 перемещается назад и до видимой стрелки.
Четвертый щелчок по ссылке 4, перемещается на 100px вправо, ссылка 3 перемещается назад и до видимой стрелки.
Затем пятый щелчок по ссылке 4, он движется назад и стрелка исчезает.

Это нормально, но когда я нажимаю в следующий раз, это не работает, а когда нажимаем дальше в следующий раз, это работает и в следующий раз не работает, и так далее.

Я ожидаю, когда ссылки перемещаются в направлении показа стрелки вправо, а когда ссылки перемещаются назад, скрытие стрелки назад.

$('.nav ul li').click(function() {
  var clicks = $(this).data('clicks');
  
  if (clicks) {
    $(this).animate({right:0});
    $('.arrow').css({'opacity':'0'});
  } else {
    $(this).css({'position':'relative'}).animate({right:100},function(){
      $('.nav ul li').not(this).animate({right:0});
    });
    $('.arrow').css({'opacity':'1'});
  }

  $(this).data("clicks", !clicks);
});

.nav {width:  100px; position: absolute; right: 40px; }
.nav ul li:hover {color: #fff;}
.arrow {
    position: absolute;
    right: 150px;
    opacity: 0;
    transition: 1s;
    -webkit-animation-name: arrowAnimation;
    -webkit-animation-duration: 1s;
    animation-name: arrow-animation;
    animation-duration: 1s
}
@-webkit-keyframes arrowAnimation {
    from { top:10%; opacity:0 }
    to { top:18%; opacity:1 }
}
@keyframes arrowAnimation {
    from { top:10%; opacity:0 }
    to { top:18%; opacity:1 }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
  </ul>
  <span class="arrow"><img src="images/arrow.png" alt="arrow" /></span>
</div>

Answer 1

Если я вас правильно понял, удар сработает.

Хотя на вашем месте я бы установил скорость перехода и анимацию для стрелки в jQuery.

$('.nav ul li').click(function() {

  if($(this).css('right') !== '100px') {
    if($('.arrow').css('opacity') == '0') {
      $('.arrow').css({'opacity':'1'});
    }


    $(this).css({'position':'relative'}).animate({right:100},function(){
      $('.nav ul li').not(this).animate({right:0});
    })
  }
  else {
    $(this).animate({right:0})
    $('.arrow').css({'opacity':'0'});
  }

});

https://jsbin.com/guwahizesi/edit?html, css, js, консоль, выход