Javascript 单击时图像滑块平滑动画效果

我有一个简单的滑块，导航div从右边开始。每个div都是一个较小的滑块图像，当我单击这个div时，它应该移动到特定的幻灯片

如何设置动画以使单击时平滑滑动

  $('.nav-img-1').click(function(){
    currentSlide = 1;
    $slideContainer.css('margin-left', 0);
  });
  $('.nav-img-2').click(function(){
    currentSlide = 2;
    $slideContainer.css('margin-left', -500);
  });
  $('.nav-img-3').click(function(){
    currentSlide = 3;
    $slideContainer.css('margin-left', -1000);
  });

---

例如，您可以找到您需要使用

animate（）

与在连续滑动中使用它的方式相同的：

$('.nav-img-1').click(function(){
    currentSlide = 1;
    $slideContainer.stop().animate({'margin-left': 0}, 1000);
});
$('.nav-img-2').click(function(){
    currentSlide = 2;
    $slideContainer.stop().animate({'margin-left': -500}, 1000);
});
$('.nav-img-3').click(function(){
    currentSlide = 3;
    $slideContainer.stop().animate({'margin-left': -1000}, 1000);
});

请注意，在

animate（）

之前还有

stop（）

，用于停止使用

幻灯片进行的其他动画。我建议您将其放在当前或将来为滑块制作的任何其他动画中

小提琴：
为什么不使用动画以及startSlider中使用的动画？