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');
    });
});