jquery - 动画中的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

现场演示

当你有一个连字符时，你需要将它用引号引起来，否则它不会正确解析给你一个语法错误。请注意，这不仅限于 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
});