Jquery动画不流畅

Question

我正在使用jquery动画来旋转项目列表，逐个显示它们。基本上我试图让它们很好地滑入和滑出，但由于某种原因它们只是立即进入而没有过渡。

这是我的代码

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});
            }
        });

    }

有没有人知道为什么我通过动画完成的过渡没有顺利进行？

编辑：这是我们要求的额外html / css。

<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

尝试将动画的下一部分放在animate回调中，以便它仅在animate方法完成后而不是在它开始后立即发生：

＆＃13;

＆＃13;

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);

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;