我有一个动画菜单,该菜单可以在外部运行,但卡在返回的路径上,第一个(#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);
        });
    });
});

最佳答案

设置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);
        });
    });
});

关于javascript - JavaScript函数无法正常运行,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30460025/

10-12 12:53
查看更多