スライダの.css（）メソッドが動作していません

Question

'use strict'; 
$(function() { 
    var currentSlide = 1; 

    //DOM cache 
    var $slider = $('#slider'); 
    var $slidesContainer = $slider.find('#container'); 
    var $slides = $slidesContainer.find("li") 
    console.log($slides.length); 


    //slider 
    setInterval(slide, 3000); 

    function slide() { 
     $slidesContainer.animate({'margin-left': '-='+400}, 800); 
     console.log(currentSlide); 
     currentSlide++; 
     if (currentSlide === $slides.length) { 
      currentSlide = 1; 
      $slidesContainer.css("margin-left", 0);// <------PROBLEM HERE 
     }//end if   
    }//end slide 
});//end js 

このスライダはほぼ良好ですが、このメソッドの.css（）が機能しない理由はわかりません。変数currentSlideが4に等しいときに1になるため（$ slides.length）、動作しています。

すべての回答ありがとうございます。

Answer 1

アニメーションが完了するのを待つ必要があります。そのコールバックメソッドを使用してください。

$slidesContainer.animate({ 
    'margin-left': '-=' + 400 
}, 800, function() { 
    // Animation complete. 
    currentSlide++; 
    if (currentSlide === $slides.length) { 
     currentSlide = 1; 
     $slidesContainer.css("margin-left", 0); 
    } 
});