translate3d transition 終了時onメソッドについて

// 左にあるサムネイル4も左にスライドさせる
$('#slider_thumbnail_4').css({
　　'transform': 'translate3d(-204%, 0, 0)',
　　'transition-duration': '0.5s'
}).on('transitionend', function() {// transition終了時処理
　　$('#slider_thumbnail_4').addClass('opacity_zero').css({
　　　　// すぐに右に移す
　　　　'transform': 'translate3d(204%, 0, 0)',
　　　　'transition-duration': '0.001s'
　　}).removeClass('opacity_zero').on('transitionend', function() {
　　　　// 右から左にスライド
　　　　$('#slider_thumbnail_4').css({
　　　　　　'transform': 'translate3d(102%, 0, 0)',
　　　　　　'transition-duration': '0.5s'
　　　　});
　　});
});

2個目のonメソッドがすぐに右に移すの後におこなわれず、
すぐに右に移すをとばして、onメソッドの中の処理をおこなってしまうのを食い止めたいのですが、何か方法あるでしょうか？
すぐに右に移すのあとに右から左にスライドをおこないたいです。