Question

i have a problem with toggle animation clicking – like when you click once and an element moves down and on the second click the element moves back up. I tried .toggle but with no success and come with this idea:

I have a function that moves a “carousel” (which is a button) down 10px [i use transit plugin]:

function carousel_4way (n, el) {

    // remove outline from clicked element
    el.blur();

    // animation
    var carousel = '#carousel-4way-nav-' + n
    var carousel_content = '#carousel-4way-' + n
        $(carousel_reset).hide();
        $(carousel).transition(
        {y: '+=10'}

        );

then i have a click of one of these carousels:

$('#carousel-4way-nav-1').click(function(event){
    return carousel_4way(1, this);
    event.preventDefault();
});

it calculates very nicely and i only need to define all the clicks for every button i want to animate.

this way i animate the buttons to move 10px down {y: ‘+=10’}
but then i would like to click them again to move up so {y: ‘-=10’} is what i need.

i mixed something like this:

function carousel_4way (n, el, m) {
$(carousel).transition(
    {y: m + '=10'}
    );


$('#carousel-4way-nav-1').click(function(event){
return carousel_4way(1, this, '+');
event.preventDefault();
});

now i just need to add to that another
return carousel_4way(1, this, ‘-‘);
and this is the place where i am stuck. is it possible?

Answer 1

You mean something like:

var transitionState = '-'; // this should be global

// the following will always evaluate to what transitionState currently is not (toggle)
return carousel_4way(1, this, (transitionState == '-') ? '+' : '-'); 

just make sure to update transitionState in carousel_4way.