javascript - appendTo not acting as expected -

i've got simple slideshow, when click .left, moves , prepends content. seems affect last slide:

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

however, i've tried reverse process appendto. appends content:

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

would know why appendto appending every item, whereas prependto prepending one?

i've updated jsfiddle , works. basically, i've changed checking method, based on ifs theoretically should return true (because you're animating 5 objects 100px, when check if animated property 100px, should return true). don't know why fails in first case, in second case, when go right left, moving 5 elements... leaving '\n\r' before them, that's why elements move right each animation.

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 last call 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 last call handler         var $last = $('.box').first();         $last.appendto('.container');         $('.box').css('left','0px');     }); });