Question

当我尝试按下右侧的“下一步”按钮时会出现问题。我的div开始下滑但是当我几次击中Butten时，我开始看到我的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。

在添加新内容时使用动画时jQuery的问题

1 个答案: