Мой jquery работает, но я сначала щелкнул элемент списка sh, а затем выполнил предыдущее действие

Question

$('.nav ul li').click(function(){
    $('.nav ul li').animate({right:0});
    $(this).css({'position':'relative'}).animate({right:100});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav 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>
</nav>

Я ожидаю, что сначала выполнится элемент таргетированного списка (справа: 100), а затем выполнится действие предыдущего или следующего элемента списка (справа: 0).

Answer 1

not (this) функция может быть добавлена ​​для выбора других следующим образом:

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav">
    <ul>
    <li style="background:black"><a href="#">link-1</a></li>
    <li style="background:black"><a href="#">link-2</a></li>
    <li style="background:black"><a href="#">link-3</a></li>
    <li style="background:black"><a href="#">link-4</a></li>
</ul>
</nav>

Answer 2

$('.nav ul li').click(function(){
    var target = $(this);
    $(".nav ul li").animate({right:0},100,function(){
       $(target).css({'position':'relative'}).animate({right:100});  
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav 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>
</nav>