translate3dがstop（的なものが）出来るかのサンプル（クリック版）

途中でプロパティ再設定すれば$.fn.stop().animate()的な動作は可能。

by FiNGAHOLiC

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<button>animation start!</button>
<div class="box"></div>

CSS

.box{
    width:100px;
    height:100px;
    top:50px;
    position:absolute;
    left:0;
    z-index:1;
    background:#000;
}

JavaScript

$(function(){
    
    var $button = $('button');
    var $box = $('.box');
    
    // 右に行くかどうかのフラグ（falseなら左に）
    var goingRight = false;
    
    // 右へ行く
    var animationRight = function(){
        $box.css({
            '-webkit-transform' : 'translate3d(200px, 0, 0)',
            '-webkit-transition' : 'all 1000ms ease-out'
        }).on('webkitTransitionEnd', function(){
            // webkitTransitionEndは毎回溜まっていくので必ずアンバインドする
            $(this)
                .off('webkitTransitionEnd')
                .css('-webkit-transition', '');
        });
    };
    
    // 左へ行く
    var animationLeft = function(){
        $box.css({
            '-webkit-transform' : 'translate3d(0, 0, 0)',
            '-webkit-transition' : 'all 1000ms ease-out'
        }).on('webkitTransitionEnd', function(){
            $(this)
                .off('webkitTransitionEnd')
                .css('-webkit-transition', '');
        });
    };
    
    var invert = function(){
        // 反転して代入
        (goingRight = !goingRight)
            // 右に
            ? animationRight()
            // 左に
            : animationLeft();
    };

    // 押下毎に方向を切り替える
    $button.on('click', invert);
    
});