Использование переменных в функции с animate

[Arinden]

Всем доброго дня! Остро встал вопрос о необходимости использования переменной для .animate в JQuery, а именно:

$(".block").click(function(){
var y = '"top"';
$(".block").animate({y: "+=200"}, "fast");
});

Вышеуказанный код не работает. Если "y" заменить на "top" - работает, но мне нужна переменная. Пробовал разные варианты и не получается. Требуется ваша помощь, дайте наводку пожалуйста.

Edited August 25, 2012 by Arinden

[lexxcode]

Как вариант можно просто подготавливать объект с учетом всех условий и передавать его в .animate

http://jsfiddle.net/alexriz/XgZxs/10/

[Arinden]

Большое спасибо, попробую разобраться!

[SelenIT]

А просто лишнюю пару кавычек убрать недостаточно?

[Arinden]

А просто лишнюю пару кавычек убрать недостаточно?

Почему-то не работает. Я слабо понимаю JQuery и JavaScript в целом, но по моей логике как раз-таки должно работать. Не могу придумать причину по которой не работает. Возможно переменная передаёт значение как текст, а не как свойство?...

Вот так работает: http://jsfiddle.net/XgZxs/20/

Слегка отредактировал с применением кода от alexriz. Но я не понимаю, что он делает. Господа, вы не могли бы объяснить "на пальцах", для чего нужно:

    var x = {};
    x[y] = '+=200';

и почему после этого я могу исключить скобки {} в animate и самое главное!! почему оно начинает работать?..

Edited August 25, 2012 by Arinden

[wwt]

А просто лишнюю пару кавычек убрать недостаточно?

Почему-то не работает. Я слабо понимаю JQuery и JavaScript в целом, но по моей логике как раз-таки должно работать. Не могу придумать причину по которой не работает. Возможно переменная передаёт значение как текст, а не как свойство?...

Вот так работает: http://jsfiddle.net/XgZxs/20/

Слегка отредактировал с применением кода от alexriz. Но я не понимаю, что он делает. Господа, вы не могли бы объяснить "на пальцах", для чего нужно:

    var x = {};
    x[y] = '+=200';

и почему после этого я могу исключить скобки {} в animate и самое главное!! почему оно начинает работать?..

потому что первым параметром в функцию animate передается объект, а массив в js это тоже объект ))

чтоб стало понятно:

 
$(".block").click(function(){ 
   var y = {}; 
   y.top = "+=200"; 
   $(".block").animate(y, "fast"); 
}); 

Edited August 26, 2012 by wwt

[lexxcode]

Так мы конструируем объект прямо в аргументе функции:

$('.block').animate({
    top : '+=200'
}, "fast");

Все что в {} скобках это объект, мы его можем инициализировать и вне аргумента функции, а в функцию передать уже только переменную содержащую объект:

var obj = { // инициализируем объект
    top : '+=200'
}
$('.block').animate(obj, "fast");

Мы не можем просто так взять и вместо top, в примере выше, подставить переменную и тем самым менять свойство, но мы можем инициализировать, например, пустой объект и создать в нем свойство top:

var obj = {}; // инициализируем пустой объект
    obj.top : '+=200'; // создаем свойство top в объекте obj

$('.block').animate(obj, "fast");

Так же объект это своего рода ассоциативный массив, тем самым можем создавать свойства и методы объекта в такой форме, передавая в качестве индекса массива имя свойства:

var obj = {}; // инициализируем пустой объект
    obj['top'] : '+=200'; // создаем свойство top в объекте obj

$('.block').animate(obj, "fast");

Из примера выше видим, что 'top' это обычное строковое значение, значит мы можем это значение записывать в другую переменную, и передавать ее в [] скобки:

var obj = {}, // инициализируем пустой объект
    attr = 'top'; // переменная со строковым значением имени свойства для объекта
    obj[attr] : '+=200'; // создаем свойство top в объекте obj, при помощи доп. переменной

$('.block').animate(obj, "fast");

Таким образом мы получаем возможность передать переменную в объект

[Arinden]

Большое вам спасибо!.. Картина проясняется. Попробую поэкспериментировать...