JavaScript 函数无法正常工作

Question

我有一个动画菜单，可以在外部运行，但在返回时卡住了，第一个(#section-1)完美返回，但其他两个(#section2和#section3)部分没有返回。有人可以帮助我吗？

$(function() {
    var outTranslate = {
        '-webkit-transform': 'translateX(-100%)',
        '-moz-transform': 'translateX(-100%)',
        '-ms-transform': 'translateX(-100%)',
        '-o-transform': 'translateX(-100%)',
        'transform': 'translateX(-100%)',
        'opacity': '0'
    };

    $("span.menu").click(function() {
        $("#section-1").css(outTranslate, function() {
            setTimeout(function() {
                $("#section-2").css(outTranslate);
            }, 100);
            setTimeout(function() {
                $("#section-3").css(outTranslate);
            }, 200);
            setTimeout(function() {
                $("#menu-overlay").fadeOut(750, 'easeOutQuad');
            }, 300);
        });
    });
});

Answer 1

设置 css 属性后无法回调函数。因为回调不是异步的。试试这个:

$(function() {
    var outTranslate = {
        '-webkit-transform': 'translateX(-100%)',
        '-moz-transform': 'translateX(-100%)',
        '-ms-transform': 'translateX(-100%)',
        '-o-transform': 'translateX(-100%)',
        'transform': 'translateX(-100%)',
        'opacity': '0'
    };

    $("span.menu").click(function() {
        $("#section-1").css(outTranslate);
        setTimeout(function() {$("#section-2").css(outTranslate);}, 100);
        setTimeout(function() {$("#section-3").css(outTranslate);}, 200);
        setTimeout(function() {$("#menu-overlay").fadeOut(750, 'easeOutQuad');}, 300);
    });
});

或者这个(使用转换框架)(链接:http://ricostacruz.com/jquery.transit/):

$(function() {
    var outTranslate = {
        '-webkit-transform': 'translateX(-100%)',
        '-moz-transform': 'translateX(-100%)',
        '-ms-transform': 'translateX(-100%)',
        '-o-transform': 'translateX(-100%)',
        'transform': 'translateX(-100%)',
        'opacity': '0'
    };

    $("span.menu").click(function() {
        $("#section-1").transition(outTranslate, function(){
            setTimeout(function() {$("#section-2").css(outTranslate);}, 100);
            setTimeout(function() {$("#section-3").css(outTranslate);}, 200);
            setTimeout(function() {$("#menu-overlay").fadeOut(750, 'easeOutQuad');}, 300);
        });
    });
});