Question

Please could someone explain why the following doesnt work. This happens on the same click event but the CSS function is not straight after so I dont want to use the callback on the animate function if possible.

Note: animation fires but css doesnt.

            container.animate({
                left : (posLeft + slideWidth),
            });


                container.css({
                left : '-'+(itemsLength + startX)+'px',
            }); 

Answer 1

.animate isn’t synchronous, that is, there’s absolutely no guarantee that .css is called after .animate is (visually) completed. So in your case, after .animate is called, .css is immediately called, but the left position is quickly overriden by .animate that internally calls setInterval.

According to the docs, the second argument could be an object that defines the option, and one of them is complete

If supplied, the complete callback function is fired once the
animation is complete. This can be useful for stringing different
animations together in sequence. The callback is not sent any
arguments, but this is set to the DOM element being animated. If
multiple elements are animated, the callback is executed once per
matched element, not once for the animation as a whole.

container.animate({
   left : (posLeft + slideWidth),
}, {
   complete: function() {
      $(this).css({ // as per doc, this is the DOM element being animated
         left : '-'+(itemsLength + startX)+'px',
      }); 
   })
});