CODEWITHSUNDEEP
jquery
Wasiim
Wasiim

Reputation: 146

How to pass parameters with jquery animate

i have the following code:

     function openme() {
        $('#wrapper').addClass('primary-nav-opened');
        topbar.animate({
            left: "265px"
        }, {
            duration: 'fast',
            easing: 'swing'
        });
        pagebody.animate({
            left: "265px"
        }, {
            duration: 'fast',
            easing: 'swing'
        });

        $('body').addClass('ov-hidden');
    }

my issue is: I have to change the attribute left to right, but i have to do it dynamically.

I have tried the following, but it does not work:

var direction = {'right' : pos};

Then i changed all 'left' values to direction. This doesn't work. What is wrong with my code, and how to get it working?

Any help would much be appreciated.

Thanks

updated code:

     function openme() {
        $('#wrapper').addClass('primary-nav-opened');
        topbar.animate({
            direction: "265px"
        }, {
            duration: 'fast',
            easing: 'swing'
        });
        pagebody.animate({
            direction: "265px"
        }, {
            duration: 'fast',
            easing: 'swing'
        });

        $('body').addClass('ov-hidden');
    }

Upvotes: 0

Views: 50

Answers (2)

putvande
putvande

Reputation: 15213

If you want to animate dynamically right or left you need to set 1 of the two to the desired amount of pixels and the other one to 'auto'. Otherwise they go in conflict and won't animate. So you could do something like this:

function openme(dir, amount) {
    $('#wrapper').addClass('primary-nav-opened');
    var movement = {};
    if (dir === 'left') {
        movement.left = amount;
        movement.right = 'auto';
    }
    if (dir === 'right') {
        movement.right = amount;
        movement.left = 'auto';
    }

    topbar.animate(
        movement, {
            duration: 'fast',
            easing: 'swing'
        });
    pagebody.animate(
        movement, {
            duration: 'fast',
            easing: 'swing'
        });

    $('body').addClass('ov-hidden');
}

openme('left','265px');

Upvotes: 1

Poetro
Poetro

Reputation: 572

 function openme(properties) {
    $('#wrapper').addClass('primary-nav-opened');
    var properties = 
    topbar.animate(properties, {
        duration: 'fast',
        easing: 'swing'
    });
    pagebody.animate(properties, {
        duration: 'fast',
        easing: 'swing'
    });

    $('body').addClass('ov-hidden');
}
openme({right: "auto", left: "265px"});
// ... sometime later
openme({right: "265px", left: "auto"});

Upvotes: 0

Related Questions