Javascript function not working correctly

Question

I have an animated menu that functions on the outward but it's stuck on the way back, the first (#section-1) returns perfectly but not other two (#section2, & #section3) sections. Can anybody help me?

$(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);
        });
    });
});

Please show the HTML as well, and clarify what the problem is (what does "stuck on the way back" mean?) — JJJ
– JJJ, Commented May 26, 2015 at 13:32
There isn't a .css() method that includes a function callback on completion. This would be obvious if you read the documentation. — Phylogenesis
– Phylogenesis, Commented May 26, 2015 at 13:34

num8er · Accepted Answer · 2015-05-26 13:45:18Z

2

You cannot callback function after setting css properties. Because it's not async to have callback. Try this:

$(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);
    });
});

or this (using transition framework) (link: 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);
        });
    });
});

edited May 26, 2015 at 13:45

answered May 26, 2015 at 13:36

num8er

19.5k4 gold badges50 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ross Anderson Over a year ago

Ah, brilliant, functioned perfectly. Thanks so much numßer ! So I didn't need the function on the first (#section-1)

Collectives™ on Stack Overflow

Javascript function not working correctly

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related