2

我想从#navCotainer 克隆第一个子按钮并将其插入到最后一个按钮之后。

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

当然链接到小提琴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>
4

2 回答 2

2

尝试这个：

http://jsfiddle.net/gtttG/

您需要为$(".button:animated").length === 0.

于 2013-06-24T14:39:54.300 回答
1

为每个项目调用动画回调，附加一个按钮 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/

于 2013-06-24T14:50:04.937 回答