jQuery + Transit rotation

Question

I'm using jquery-2.0.2.min.js and jquery.transit.min.js in my page. I have a div with the id="expand", and it toggles in rotating when you click it. My problem is when after the 2nd toggle, it won't rotate. It just rotates on the 1st click.

flag_expand has an initial value of 0.

$('#expand').click(function() {

        if (flag_expand == 0) {
            $('footer').transition({
                height: 140
            }, 1000, function() {} );

            $('#expand').transition({
                rotate: '180deg'
            }, 1000, function() {} );

            flag_expand = 1;
        }

        else if (flag_expand == 1) {
            $('footer').transition({
                height: 60
            }, 1000, function() {} );

            $('#expand').transition({
                rotate: '180deg'
            }, 1000, function() {} );

            flag_expand = 0;
        }

});

Answer 1

The transition rotate function sets the rotation to 180deg both times it does not rotate it 180 degrees. If you want to rotate it back try with 0deg in the rotate back block or if you want it to turn all way round (and continue to always rotate clockwise) then you'll have to get the current rotation and add 180deg to that every time.

jsfiddle

$(function () {
    var flag_expand = 0;
    $('#expand').on('click', function () {
        if (flag_expand == 0) {
            $('#expand').transition({
                rotate: '180deg'
            }, 1000, function () {
                flag_expand = 1;
            });
        } else {
            $('#expand').transition({
                rotate: '0deg'
            }, 1000, function () {
                flag_expand = 0;
            });
        }
    });
});

Answer 2

Try this in your code:

$('#expand').click(function(e) {

    e.preventDefault();

    if (flag_expand == 0) {
        $('footer').transition({
            height: 140
        }, 1000, function() {} );

        $('#expand').transition({
            rotate: '180deg'
        }, 1000, function() {} );

        setTimeout(function() {

            flag_expand = 1;

        }, 1);            
    }

    else if (flag_expand == 1) {

        $('footer').transition({
            height: 60
        }, 1000, function() {} );

        $('#expand').transition({
            rotate: '0deg'        // Updated
        }, 1000, function() {} );

        setTimeout(function() {

            flag_expand = 0;

        }, 1);
    }
});