translate3dがstop（的なものが）出来るかのサンプル（ホバー版、JSから）

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

by FiNGAHOLiC

HTML

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

CSS

button{
    margin:10px;
    padding:10px;
}
.box{
    width:100px;
    height:100px;
    top:100px;
    position:absolute;
    left:10px;
    z-index:1;
    background:#000;
}

JavaScript

$(function(){
    
    var $button = $('button');
    var $box = $('.box');
    
    // 右へ行く
    var animationRight = function(){
        $box.css({
            '-webkit-transform' : 'translate3d(200px, 0, 0)',
            '-webkit-transition' : 'all 500ms 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 500ms ease-out'
        }).on('webkitTransitionEnd', function(){
            $(this)
                .off('webkitTransitionEnd')
                .css('-webkit-transition', '');
        });
    };

    // マウスオーバー毎に方向を切り替える
    $button
        .on('mouseenter', animationRight)
        .on('mouseleave', animationLeft);
    
});