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

Question

// 左にあるサムネイル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() {// transition終了時処理
        // 右から左にスライド
        $('#slider_thumbnail_4').css({
            'transform': 'translate3d(102%, 0, 0)',
            'transition-duration': '0.5s'
        });
    });
});

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

Comments

[hidekichi]

どういうhtmlの構造になってますか？

Answer 1

そこも制御すればいいんじゃなでしょーか