CODEWITHSUNDEEP
javascriptjqueryarraysvariables
Lukas
Lukas

Reputation: 7734

How to set two variables as one

I have this question, and i can't find any radical answer...

So, is there any possibility to set with jQuery two variables as one, smth like this:

    var $self = {
        car_img_stage: $('.car_img_stage'),
        vis_home: $('#vis_home')
    }

and use after like that:

    $self.animate({
        'margin-left': '-1200px'
    }, 600)

Thx for help.

Upvotes: 2

Views: 112

Answers (4)

Lukas
Lukas

Reputation: 7734

As additional answer from me i have find some other solve, and it's work.

var car_img_stage = $('.car_img_stage'),
    vis_home = $('#vis_home');

var self = jQuery.makeArray(vis_home,car_img_stage);

and action 

self.animate({
    // some animate action
}, 600);

Upvotes: 0

iabw
iabw

Reputation: 1108

There are several ways to accomplish this -

Multiple selectors

$self = $('.car_img_stage,#vis_home');

jQuery add

//basic use
$self = $('.car_img_stage').add('#vis_home');

These are both animated the same way:

$self.animate({
    'margin-left': -1200
}, 600);

Add is also useful if you want to cache your selectors and use them individually later.

//cached selectors
$car_img = $('.car_img_stage');
$vis_home = $('#vis_home');
$self = $car_img.add($vis_home);

$car_img.animate({
    'color': 'red'
}, 600);

$vis_home.animate({
    'height': 200
}, 600);

$self.animate({
    'margin-left': -1200
}, 600);

You could also leave your selector how it is and loop through it. This way is NOT recommended, but will technically work.

var $self = {
    car_img_stage: $('.car_img_stage'),
    vis_home: $('#vis_home')
}

for (var each in $self){
    $self[each].animate({
        'margin-left': -1200
    }, 600);
}

This next note is not related to the original question, but is an important point to remember when dealing with animating multiple selectors.

Note that when animating multiple selectors, any callbacks attached will fire for EACH ITEM ANIMATED. This is relevant when say, fading out a list of links (instead of the wrapper containing them), or something like that. To avoid this problem, you can use a promise, like so:

$self = $('.car_img_stage,#vis_home');

$self.animate({
    'margin-left': -1200
}, 600, function(){
    //callback code here to happen for every animated element.
}).promise().done(function(){
    //callback code here, to happen once when ALL animations are complete.
});

You can leave off either or both of these callback functions:

Just a callback:

$self.animate({
    'margin-left': -1200
}, 600, function(){
    //callback code here to happen for every animated element.
});

Just a promise:

$self.animate({
    'margin-left': -1200
}, 600).promise().done(function(){
    //callback code here, to happen once when ALL animations are complete.
});

Upvotes: 2

vkuzma
vkuzma

Reputation: 130

You can do this:

var some_things = $('.car_img_stage, #vis_home');

some_things.animate({
    'margin-left': '-1200px'
}, 600)

Upvotes: 1

Blazemonger
Blazemonger

Reputation: 92983

You can create a combined selector that should accomplish the same thing:

$self = $('.car_img_stage,#vis_home');

Upvotes: 6

Related Questions