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;
        }

});

Black Sheep · Answer 1 · 2013-09-05T14:25:23.400

1

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

edited Sep 05 '13 at 14:25

answered Sep 05 '13 at 13:38

Black Sheep

6,604
7
30
51

1

In your fiddle have write: `$('document')..` change it to `$(document)` without quotes... and where is footer? – Black Sheep Sep 05 '13 at 13:58
the
is the container of the #expand
– Kevin Lloyd Bernal Sep 05 '13 at 13:59

Trond Hatlen · Accepted Answer · 2013-09-05T14:12:11.840

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

jQuery + Transit rotation

2 Answers2