如何将变量传递给jquery动画函数属性？

Question

function SlideObject(Side) {
    $("#div").animate({
        margin+Side: "-1000px",
        opacity: "hide"
    }, 1000);
}

我想将"Side"的值传递给animate函数的属性标识符(margin)的名称.

我知道"margin + Side"无效只是作为占位符.例如,如果我手动指定属性名称,则可以将"marginLeft"命名为一个示例.我想提供"Left","Right","Top"或"Bottom"作为SlideObject函数的参数.

我做这件事很麻烦,一个例子会很精彩.

谢谢

Answer 1

首先,不要使用eval()这样做.没有必要,如果您以任何方式使用用户输入作为其中一部分(直接或间接),则会使您的网站暴露于漏洞.正确的方法是:

<div id="div">This is a test</div>

用CSS:

#div { padding: 15px; background: yellow; }

和Javascript:

function slideObject(side) {
  var anim = {opacity: 0};
  anim["margin" + side] = "-1000px";
  $("#div").animate(anim, 1000);
}

$(function() {
  slideObject("Left");
});

您会注意到该opacity值已更改为0. hide不是有效值opacity.

基本上,您创建匿名对象,然后使用分配动态属性[].