我的jquery可以工作，但我希望先执行单击的列表项，然后再执行上一个操作

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(此)函数来选择其他函数，如下所示：

​

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

​