[lucky3]

Hi guys.

I'm having trouble understanding the complete function behavior, when I execute the following code:

$(function () {
    
    var numsFaded = 0;
    var box = $("#box");
    var fades = $("#fades");
    var toggle = true;

    fades.text(numsFaded);
    
    var fOut = function () {
        box.fadeOut(250, incrementNums());
    };

    var fIn = function () {
        box.fadeIn(250, incrementNums());
    };
    
    var incrementNums = function () {
        numsFaded++;
        fades.text(numsFaded);
        flip(numsFaded);
    };

    var flip = function (i) {
        if (i < 20) {
            if (toggle === true) {
                toggle = false;
                fIn();
            } else {
                toggle = true;
                fOut();
            }
        }
    };
    
    fOut();
});

My problem is with incrementing value of "fades" element. Why is it incremented to 20 instantly? I expected the value to be incremented after each fade effect is done executing. According to jQuery API documentation, it should execute flip() function after animation. What is happening here, that I don't see (did I mention that this is my first post in JS JQ forums, and I'm new to this?! /> )?

P.S.
search on the forums is not working for me...

[laytonsdad]

The reason that you are getting 20 at the start is that you are calling the incrementNums() in your callback, what you want to do is pass a reference to it.

Remove the () from both callbacks and it will work fine.

Spoiler

$(function () {

    var numsFaded = 0;
    var box = $("#box");
    var fades = $("#fades");
    var toggle = true;

    fades.text(numsFaded);

    var fOut = function () {
        box.fadeOut(250, incrementNums);  //removed ()
    };

    var fIn = function () {
        box.fadeIn(250, incrementNums);  //removed ()
    };

    var incrementNums = function () {
        numsFaded++;
        fades.text(numsFaded);
        flip(numsFaded);
    };

    var flip = function (i) {
        if (i < 20) {
            if (toggle === true) {
                toggle = false;
                fIn();
            } else {
                toggle = true;
                fOut();
            }
        }
    };

    fOut();
});

This post has been edited by Dormilich: 31 May 2013 - 04:11 PM
Reason for edit:: fixed typo

[lucky3]

Great, thanks. It never came to my mind, probably because of fading effects working as expected.