Question

我有一个简单的幻灯片，当您点击.left时，移动并预先设置内容。这似乎只影响last幻灯片：

$('.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的动画，当你检查动画属性是否是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');
    });
});

appendTo没有按预期行事

1 个答案: