Jquery animate is not smooth

Question

I am using jquery animate to rotate through a list of items, showing them one by one. Basically I'm trying to have them slide in and out nicely, but for some reason they are simply coming in instantly and have no transition.

Here is my code

var left_indent = parseInt($('#carousel-'+side+' #slides ul').css('right')) - item_width;
for (i = 0; i < 500; i++) {

        //slide the item
        $('#carousel-'+side+' #slides ul').animate({'right' : left_indent}, 400,"linear", function () {

            current_item = $('#carousel-'+side+' #slides li:nth-child(1)').data('id');

            if (current_item == selected_item)
                passes ++;

            if ( (passes > 1) && (current_item == selected_item) ) {
                if (side == 'creator') {
                    creator_opened = true;
                } else {
                    opponent_opened = true;
                }
                if (creator_opened && opponent_opened) {
                    $('#winner-block').show();                  
                }                   

            } else {
                //move the first item and put it as last item
                $('#carousel-'+side+' #slides li:last').after($('#carousel-'+side+' #slides li:first'));                    

                //set the default item to correct position
                $('#carousel-'+side+' #slides ul').css({'right' : left_value});
            }
        });

    }

Does anyone see why my transitions done through animate are not happening smoothly?

Edit: Here is the additional html / css requested.

<style>
#carousel-creator, #carousel-opponent {
        width:200px;
        height:220px;   
        margin:0 auto;
        margin-bottom:100px;
    }

    #slides {
        display:none;
        overflow:hidden;
        /* fix ie overflow issue */
        position:relative;
        width:200px;
        height:220px;
        border:3px solid #3F3F3F;
        background-color:#2c2c2c;
    }

    #slides ul {
        position:relative;
        left:0;
        top:0;
        list-style:none;
        margin:0;
        padding:0;  
        width:750px;            
    }

    #slides li {
        width:200px;
        height:220px;   
        float:left;
        text-align:center;
        padding:10px;
    }

    #slides li img {
        width:150px;
    }
</style>

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

<div class="col-md-6" style="background-color:none;">
    <div id="carousel-creator">

        <div id="slides"> 
            <ul>
                <li data-id="1">
                    <img src="image1.png" /><br />
                    <span class="item-title">Title 1</span><br />
                </li>
                <li data-id="2">
                    <img src="image2.png" /><br />
                    <span class="item-title">Title 2</span><br />
                </li>           
                <li data-id="3">
                    <img src="image3.png" /><br />
                    <span class="item-title">Title 3</span><br />
                </li>                                                   
            </ul>                                   
        </div>
    </div>
</div>

Answer 1

Try putting the next part of the animation in the animate callback so that it only happens after the animate method is done instead of right after it starts:

var side = 'creator',
  item_width = parseInt($('#carousel-' + side + ' #slides li').outerWidth()),
  first_item,
  left_indent;

function showNextImage(callback, timesLeft) {
  //slide the item
  left_indent = parseInt($('#carousel-' + side + ' #slides ul').css('left')) - item_width;
  $('#carousel-' + side + ' #slides ul').animate({
    'left': left_indent
  }, 1000, "linear", function() {
      left_indent += item_width;
    $($('#carousel-' + side + ' #slides ul').children()[0]).appendTo($('#carousel-' + side + ' #slides ul'));
    $('#carousel-' + side + ' #slides ul').css({
      'left': left_indent
    });
    if (typeof timesLeft === 'number' && timesLeft > 1 && typeof callback === 'function') {
      callback(callback, timesLeft - 1);
    }
  });

}
showNextImage(showNextImage, 500);

#carousel-creator,
#carousel-opponent {
  width: 200px;
  height: 220px;
  margin: 0 auto;
  margin-bottom: 100px;
}
#slides {
  overflow: hidden;
  /* fix ie overflow issue */
  position: relative;
  width: 200px;
  height: 220px;
  border: 3px solid #3F3F3F;
  background-color: #2c2c2c;
}
#slides ul {
  position: relative;
  left: 0;
  top: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 750px;
}
#slides li {
  width: 200px;
  height: 220px;
  float: left;
  text-align: center;
  padding: 10px;
}
#slides li img {
  width: 150px;
}
#slides #li1 {
  background-color: red;
}
#slides #li2 {
  background-color: green;
}
#slides #li3 {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-6" style="background-color:none;">
  <div id="carousel-creator">

    <div id="slides">
      <ul>
        <li id="li1" data-id="1">
          <img src="image1.png" />
          <br />
          <span class="item-title">Title 1</span>
          <br />
        </li>
        <li id="li2" data-id="2">
          <img src="image2.png" />
          <br />
          <span class="item-title">Title 2</span>
          <br />
        </li>
        <li id="li3" data-id="3">
          <img src="image3.png" />
          <br />
          <span class="item-title">Title 3</span>
          <br />
        </li>
      </ul>
    </div>
  </div>
</div>