Javascript 函数无法正常工作答案

【问题标题】：Javascript function not working correctlyJavascript 函数无法正常工作
【发布时间】：2015-05-26 21:45:18
【问题描述】：

我有一个动画菜单，可以向外运行，但在返回时卡住了，第一个 (#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);
        });
    });
});

【问题讨论】：

尝试把你的代码放在 JsFiddle 上
请同时显示 HTML，并说明问题所在（“卡在回来的路上”是什么意思？）
.css() 没有默认回调。
没有一个 .css() 方法在完成时包含函数回调。如果您read the documentation，这将是显而易见的。
为什么不加一个类？

标签： javascript jquery

【解决方案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);
        });
    });
});

【讨论】：

啊，太棒了，完美运行。非常感谢 numßer ！所以我不需要第一个函数（#section-1）