appendTo表現不理想

Question

我有一個簡單的幻燈片顯示，當您單擊.left ，將移動並添加內容。 這似乎只影響last一張幻燈片：

http://jsfiddle.net/tmyie/4CuLE/4/

$('.left').click(function(){
        $('.box').animate({left: '+=100'}, 100, function(){
        var $last = $('.box').last();
        if ($last.css('left') == '100px') {
            $last.prependTo('.container').before('\n\r');
            $('.box').css('left','0px');
        }
    });
});

但是，我嘗試使用appendTo逆轉此過程。 這將附加到所有內容：

$('.right').click(function(){
        $('.box').animate({left: '-=100'}, 100, function(){
        var $last = $('.box').first();
        if ($last.css('left') == '-100px') {
            $last.appendTo('.container').before('\n\r');
            $('.box').css('left','0px');
        }
    });
});

有誰知道為什么appendTo追加到每個項目，而prependTo追加到每個項目？

Answer 1

我已經更新了您的jsfiddle ，現在可以使用了。 基本上，我已經更改了您的檢查方法，基於理論上應該始終返回true的ifs （因為您要對五個對象設置100px的動畫效果，當檢查animation屬性是否為100px時，它應該返回true）。 我不完全知道為什么在第一種情況下它會失敗，但是在第二種情況下，當您從右向左移動時，您基本上是在移動這五個元素...但是在它們之前保留了'\\ n \\ r'，這就是為什么每個動畫元素都向右移動。

var $boxes = $('.box');
var max = $boxes.length;
$('.left').click(function(){
    var count = 0;
    $boxes.animate({left: '+=100'}, 100, function(){
        if (++count != max) return; //check whether is the last call to the handler
        var $last = $('.box').last();
        $last.prependTo('.container');
        $('.box').css('left','0px');
    });
});

$('.right').click(function(){
    var count = 0;
    $('.box').animate({left: '-=100'}, 100, function(){
        if (++count != max) return; //check whether is the last call to the handler
        var $last = $('.box').first();
        $last.appendTo('.container');
        $('.box').css('left','0px');
    });
});