jQuery - 如何将字符串作为参数传递给动画函数

Question

我正在尝试以字符串形式检索参数，并将它们直接提供给 jQuery 的 animate 函数，如下所示:

我的html:

<img src="myImage.png" rel="{top:'20px',left:'1000px'},500|{top:'20px',left:'10px'},500" class="slide-content" />

我的 jQuery 代码:

var $elem = $('.slide-content');
var settings = $elem.attr('rel').split('|');
$elem.animate(settings[1]);

这不起作用。如果我手动进行设置，它会起作用:

$elem.animate({top:'20px',left:'1000px'},500);

有没有一种简单的方法可以让它发挥作用？或者我是否必须解析字符串并构建一个设置对象？

任何指示将不胜感激，谢谢!

根据 Jon 的回答进行编辑:结果你必须解析正确形成的 JSON，所以我像这样更新了代码

HTML:

<img src="myImage.png" rel='{"anim":{"top":"20px","left":"1000px"},"speed":"500"}|{"anim":{"top":"20px","left":"20px"},"speed":"500"}' class="slide-content" />

请注意 html rel 属性是如何用单引号而不是双引号括起来的。这是因为 JSON 元素需要用双引号引起来。

jQuery 部分:

var $elem = $('.slide-content');
var settings = $elem.attr('rel').split('|');
var animIn = $.parseJSON(settings[1]);
var animOut = $.parseJSON(settings[0]);
$elem.animate(animIn.anim, animIn.speed).delay(2000).animate(animOut.anim, animIn.speed);

只是为了弄清楚问题背后的原因:

• 这将作为 slider 插件的基础，其中每个内部部分将独立进行动画处理，并且必须易于用户在 HTML 元素本身内进行设置

• 必须在使用 XHTML 的网站上运行

无论如何，感谢您的快速回复和有用的指示:)

Answer 1

您需要传递一个对象，而不是字符串。您已经有了对象的 JSON 表示形式，因此您只需要从中创建一个对象即可。使用 JSON.parse 来做到这一点，所有现代浏览器都支持。

更新:我只是更加注意并意识到您也尝试在其中的动画持续时间中进行硬拉，但这没有帮助(它使事情变得更加复杂)。您应该考虑将 HTML 更改为如下内容:

<img src="myImage.png" 
     rel="{anim:{top:'20px',left:'1000px'},speed:500}|{anim:{top:'20px',left:'10px'},speed:500}" class="slide-content" />

然后您可以执行以下操作:

var $elem = $('.slide-content');
var settings = JSON.parse(($elem.attr('rel').split('|'))[1]);
$elem.animate(settings.anim, settings.speed);

顺便说一句:像这样征用 rel 属性可能不是最好的主意。如果您想将任意数据附加到这样的元素，您可以使用 HTML 5 数据属性:

<img src="myImage.png"
     data-foo="{top:'20px',left:'1000px'}"
     data-foo-speed="500"
     data-bar="{top:'20px',left:'10px'}"
     data-bar-speed="500"
     class="slide-content" />

var $elem = $('.slide-content');
$elem.animate(JSON.parse($elem.data("foo"), $elem.data("foo-speed"));