Question

我想从#navCotainer克隆第一个子按钮，并在最后一个按钮后插入它。

现在的问题是：脚本类型插入第一个孩子3次。我该怎么办才能做到正确？而且，我做错了什么？

当然是指向小提琴http://jsfiddle.net/ygjDR/和代码的链接：

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<span class="moveNav8 left8">left</span>

<div id="navContainer" style="width: 100%; overflow-y: auto;">
    <div class="button">1</div>
    <div class="button">2</div>
    <div class="button">3</div>
    <div class="button">4</div>
</div>

<script type="text/javascript">
    $(document).on('click','.moveNav8', function() {
        if($(this).hasClass('left8')) {
            $('.button').animate({
                left: '-=305'
            }, 1000, function() {
                $('#navContainer div.button:first-child').addClass("xxxx");
                $('#navContainer ').children('div.button:first-child').clone().css("background-color","orange").insertAfter("#navContainer div.button:last-child");
            });
        }
    });
</script>

<style type="text/css">
.button {
    position: relative; float: left;
    width:100px;
    height:50px;
    background-color:green;
    margin-right:10px;
}
.moveNav8 {
    position:absolute;
    top:100px;
    left:0px;
    background-color:red;
    width:40px;
    height:40px;
}
.moveNav8.right8 {
    left:100px;
}
</style>

Answer 1

试试这个：

http://jsfiddle.net/gtttG/

您需要为$(".button:animated").length === 0添加支票。

Answer 2

为每个项目调用动画回调，附加按钮4次。而是在使用延迟模式的最后一个动画之后仅执行一次回调：

$(document).on('click', '.moveNav8', function () {
    if ($(this).hasClass('left8')) {
        $('.button').animate({
            left: '-=305'
        }, 1000).promise().done(function () {
            $('#navContainer div.button:first-child').addClass("xxxx");
            $('#navContainer').children('div.button:first-child').clone().css("background-color", "orange").insertAfter("#navContainer div.button:last-child");
        })
    }
});

http://jsfiddle.net/ygjDR/3/

克隆和插入仅一次

2 个答案: