Question

我有一个动画菜单，它在外面起作用，但它在后面的路上停留，第一个（＃section-1）完全返回，但不是其他两个（＃section2，＆amp; #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属性后无法回调函数。因为回调并不是异步。试试这个：

<select ng-change="goToFormDashboard(Formname.Formid)" ng-model="Formname" 
ng-options="f.Formname for f in forms track by f.Formid"></select>

或者（使用转换框架）（链接：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").css(outTranslate);
        setTimeout(function() {$("#section-2").css(outTranslate);}, 100);
        setTimeout(function() {$("#section-3").css(outTranslate);}, 200);
        setTimeout(function() {$("#menu-overlay").fadeOut(750, 'easeOutQuad');}, 300);
    });
});

Javascript函数无法正常工作

1 个答案: