Q:

if I change a fixed width to 'auto' the animation is distorted

To the boxes that I have as span, I want them to have a width auto so that the text can be shown completely horizontally. but if I change it to auto it damages my animation. by default the width value is 50px and so it works fine.
http://jsfiddle.net/31n7r699/
#horizontalScroller > span {
 position:absolute;

 width:50px;
 __width:auto;

 height:50px;
 left: -50px;
 border: 1px solid blue;
 overflow:hidden;
 display:inline-block;
 background:red;

}

A:

You just need simple changes in your CSS.
#horizontalScroller > span {
    position:absolute;
    // make it width auto
    width:auto;
    // put it far far far away from the view to prevent the blink thingy at start
    left: 999px;
    border: 1px solid blue;
    background:red;
    // make it nowrap, this will prevent the span from forcing the text from being displayed in the container
    white-space: nowrap;
    // remove this, <span> are inline-block by default
    // this do not work also as this is position: absolute;
    // display: inline-block;
}

UPDATED:
Your solution is only working because the elements involved have consistent width, it will break when they have inconsistent widths as it should it the real sense when some sentences are shorter and others are longer. To fix this issue you need to take into account on positioning them properly with their respective widths:
$(document).ready(function() {
    var container  = $("#horizontalScroller");
    var children   = $(container).children();
    var containerW = $(container).width();
    // simply the space between them
    var padding    = 10;

    for (var i = 0; i < children.length; i++)
    {
      var item  = children[i];
      var itemW = $(item).width();
      // position the first item with X = container width + padding
      var X     = containerW + padding;

      // we need to properly position the elements beside each other
      // specially if they have different widths
      // i > 0 because there is no sibling on 0
      if (i > 0)
      {
         // get the element before this
         var sibling  = children[i - 1];
         // get the siblings X and W
         var siblingX = parseInt($(sibling).css("left"));
         var siblingW = $(sibling).width();
         // position this element beside the sibling by:
         // X = sibling X + sibling W + padding
         X = siblingX + siblingW + padding;
      }

      $(item).css("left", X + "px");
      window.horizontalScroller($(item));
    }
});

then in your animation callback, you should also do this solution:
$elem.animate({ left: (parseInt(left)-60) }, 900, function () {
  var currentLeft = parseInt($(this).css("left"));
  var width       = $(this).width();
  var container   = $(this).parent("#horizontalScroller");
  var containerWidth = $(container).width();

  if ((currentLeft + width) <= 0)
  {
    // instead of putting it at the end of the container
    // $(this).css("left", (containerWidth + width) + "px");
    
    // we need to put it beside the last element in the list
    var children   = $(container).children();
    // get the last item
    var lastChild  = children[children.length - 1];
    // get the lastChild X and W
    var lastChildX = parseInt($(lastChild).css("left"));
    var lastChildW = $(lastChild).width();
    var padding    = 20;
    var X          = lastChildX + lastChildW + padding;

    // position this element beside the last item
    $(this).css("left", X + "px");
    // move this element beside the last item
    // literally moving the element beside the last item in the DOM to make this solution fully functional
    $(this).insertAfter(lastChild);
}

  window.horizontalScroller($(this))
});

working fiddle
Hope that helps,

