За последние 24 часа нас посетили 26596 программистов и 1510 роботов. Сейчас ищут 834 программиста ...

jQuery animate + переменная

Тема в разделе "JavaScript и AJAX", создана пользователем Freakmeister, 1 май 2012.

  1. Freakmeister

    Freakmeister Активный пользователь

    С нами с:
    20 дек 2009
    Сообщения:
    888
    Симпатии:
    5
    Есть следующий код:
    Код (Text):
    1. var $side = 'left';
    2. $('#button-'+$side).click(function() {
    3.    $('#content').animate({'margin-left': '50', 'left': '40'}, 500);
    4. }
    Нужно внутри animate заменить 'left' переменной $side, чтобы в неё потом можно было подставить 'left' или 'right' по желанию. Только это почему-то не получается сделать. В таком виде скрипт крэшится полностью:
    Код (Text):
    1. $('#content').animate({'margin-'+$side: '50', 'left': '40'}, 500);
    А в таком, просто не работает вторая часть анимации:
    Код (Text):
    1. $('#content').animate({'margin-left': '50', $side: '40'}, 500);
    Подскажите плз правильный синтаксис.
     
  2. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    У тебя тут в оригинале стоит закрывающая скобка?
    $('#button-'+$side).click(function() {
    $('#content').animate({'margin-left': '50', 'left': '40'}, 500);
    });

    И на будущее, если это JS, то использовать переменные вида $side в PHP рискованно, заменится каким-нибудь числом или массивом, можно и не заметить сразу.

    Так работает
    Код (Text):
    1. var left='margin-'+'left';
    2. $('#button-left').click(function(){
    3.     $('#content').animate({left:'50','left':'40'},500);
    4. });
     
  3. Freakmeister

    Freakmeister Активный пользователь

    С нами с:
    20 дек 2009
    Сообщения:
    888
    Симпатии:
    5
    Спасибо, попробую. Да, закрывающая скобка в оригинале есть.) Просто оригинал очень большой, и делать вам мозги таким примером я не решился.)
     
  4. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Код (Text):
    1. $('#content').animate({left:'50','left':'40'},500);
    Тут кстати только стиль left сработает, приедет к 40 пикселям слева.
     
  5. Freakmeister

    Freakmeister Активный пользователь

    С нами с:
    20 дек 2009
    Сообщения:
    888
    Симпатии:
    5
    Нифига не работает короче. Оно просто не воспринимает переменную внутри animate.
     
  6. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    У меня то работает :)
     
  7. Freakmeister

    Freakmeister Активный пользователь

    С нами с:
    20 дек 2009
    Сообщения:
    888
    Симпатии:
    5
    Значит ты что-то делаешь не так.)) У меня сработало только с объектом:
    Код (Text):
    1. var $side = 'left';
    2. var $ob_marg1 = {};
    3. $ob_marg1['margin-' + $side] = 50;
    4. $('#content').animate($ob_marg1, 500);
    Что самое странное, свойство .css нормально хавает переменные, а анимэйт нифига.)
     
  8. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    На самом деле у меня тоже не работает.
    Делал
    Код (Text):
    1. var left='margin-left';
    2. $('#button-left').click(function(){
    3.     $('#content').animate({left:'50'},{duration:500,queue:false});
    4. });
    Но берётся свойство left, а не margin-left. Если поменять переменную на left1, то вообще тишина. Дебаггер пишет
    Код (Text):
    1. Предупреждение: reference to undefined property f.event.triggered
    2. Предупреждение: reference to undefined property a.returnValue
    3. Предупреждение: reference to undefined property c.result
     
  9. Freakmeister

    Freakmeister Активный пользователь

    С нами с:
    20 дек 2009
    Сообщения:
    888
    Симпатии:
    5
    В JS правильно писать: 'marginLeft'.
     
  10. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Если marginLeft, то нужно без кавычек, это имя переменной. Можно в кавычках название css 'margin-left'.
     
  11. Freakmeister

    Freakmeister Активный пользователь

    С нами с:
    20 дек 2009
    Сообщения:
    888
    Симпатии:
    5
    Нет, marginLeft это не имя переменной.) В кавычках оно воспринимается в JS как margin-left. Попов сказал, что 'marginLeft' писать "более правильно", так что просто прими как истину.)))
     
  12. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Вам с Поповым (если, конечно, он правда так пишет) следует почитать документацию http://api.jquery.com/animate/, иначе проблемы будут на каждом шагу.

    Добавлено спустя 2 минуты 46 секунд:
    Пример оттуда
    Код (Text):
    1. $("#block").animate({
    2.     width: "70%",
    3.     opacity: 0.4,
    4.     marginLeft: "0.6in",
    5.     fontSize: "3em",
    6.     borderWidth: "10px"
    7.   }, 1500 );
    Авторам видней, как и тем, кто читает документацию авторов.