jQuery дефисы в анимации

Question

$this.animate( { 
       width: +=50, 
       height: +=50, 
       padding-right:50px 
       } 

наряду с атрибутами границы webkit/moz, я не смог использовать любые дефисные свойства css. Поместив его в кавычки («padding-right») и полностью удалив дефис («paddingRight») не исправило его, поверх последнего не работает с атрибутами webkit/moz.

Я получаю ошибку в инструменте контроля Chrome является:

Uncaught SyntaxError: Unexpected token - 

Answer 1

Live Demo

Если у вас есть дефис вам нужно обернуть его в кавычки, иначе он не будет разбирать правильно давать вам синтаксис ошибка. Обратите внимание, что это не ограничено свойствами jQuery, свойствами объекта в целом.

$this.animate( { 
       width: '+=50', 
       height: '+=50', 
       'padding-right':50 
       }); 

j08692 также правильно в комментариях, paddingRight также будет работать. http://docs.jquery.com/index.php?title=Effects/animate&redirect=no

Answer 2

В именах переменных JavaScript не допускаются дефисы. Для борьбы с этой проблемой jQuery использует верблюжий корпус для имен свойств CSS.

Например, вместо padding-right вы бы использовали paddingRight.

Теперь это не в порядке, у вас также есть другая проблема. width: +=50 и height: +=50 неверны. Вы пытаетесь увеличить на 50, но нет переменной для увеличения. Я вижу, что вы пытаетесь сделать, и возможно, что вам нужно.

$this.animate({ 
    width: $this.width() + 50, 
    height: $this.height() + 50, 
    paddingRight: 50 
}); 

Answer 3

$(this).animate({ 
    width: // set the width to what you want it to end// 
    height: //set the height to what you want in the end 
    paddingRight: "50px", // use quotes and commas 
});