javascript - 添加新内容时使用动画时 jQuery 问题

Question

当我尝试点击右侧的“下一步”按钮时出现问题。我的 div 开始滑动，但是当我按下按钮几次后，我开始看到我的 div 之间的这些空白区域。那不应该发生。这怎么能解决。我提供了指向 jsfiddle 的链接.

var  x = ["blue", "red", "black", "green", "orange"];
    var i = 0;
    $(document).ready(function(){


        $("#right").click(function(){
            if (i === x.length) {
            i = 0;
            }

            $(".slide2:last-child").after("<div class='slide2' style='background-color:" + x[i] + ";'></div>");
            $(".slide2").animate({right:'+=100%'}, 1000);
            //$(".slide2:last").remove();   



            i++;        
        });
    });

Answer 1

这主要是因为您要单独为每张幻灯片制作动画。

如果你将你的元素包裹在另一个元素中，并且只为这个元素设置动画，你将拥有一个更一致的动画:

HTML:

<div id="three">
    <span id="left"><</span>
    <span id="right">></span>
    <div class='container'>
        <div class="slide2"></div>
        <div class="slide2" style="background-color:olive;"></div>
    </div>
</div>

JS:

var  x = ["blue", "red", "black", "green", "orange"];
var i = 0;
$(document).ready(function(){
    $("#right").click(function(){
        if (i === x.length) {
            i = 0;
        }
        $(".slide2:last-child")
            .after("<div class='slide2' style='background-color:" + x[i] + ";'></div>");
        $(".container")
            .animate({left:(-i*100)+'%'}, 1000);
        i++;        
    });
});

已更新 JSFiddle .