Jquery 动画不流畅

Question

我正在使用 jquery animate 旋转项目列表，将它们一一显示。 基本上我试图让它们很好地滑入和滑出，但出于某种原因，它们只是立即进入并且没有过渡。

这是我的代码

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方法完成后发生，而不是在它开始后立即发生：

 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>