关于 jQuery UI 传输的困惑

Question

我想使用 jQuery UI

transfer()

方法来隐藏元素。

我有一个

div.click

和一个

span.target

。我希望单击时将

div

移动到

span

。

我尝试了这段代码：

$("div.click").live('click', function () {
      var i = 1 - $("div.click").index(this);
      $(this).effect("transfer", { to: $("span.target").eq(i) }, 1000);
});

但是什么也没发生。

在我下载的演示中，据说

transfer

是“隐藏”的选项。但在他们的网站上，它说这是“效果”的一个选项。

有人可以帮助我了解如何使用它吗？

Answer 1

根据文档（相当很难找到），您必须设置

ui-effects-transfer

类的样式（通常指定虚线边框）才能首先看到传输。

hide()

方法的文档有些误导性，您不能将

"transfer"

效果与

hide()

一起使用。但是，如果您确实希望在

"transfer"

效果完成后使元素不可见，您可以使用回调，就像我在下面的演示中所做的那样。

工作演示：http://jsbin.com/iwijo（可通过http://jsbin.com/iwijo/edit编辑）

附注我假设您的代码中的

1 -

是故意的，而不是拼写错误。将负索引传递给

eq()

会使其以相反的顺序选择元素。

Answer 2

与其链接，不如使用函数回调 - 以便在传输完成时发生：

$("div.click").live('click', function () {
   var i = 1 - $("div.click").index(this);
   $(this).effect('transfer', { to: $("span.target").eq(i) }, 1000, function(){
      $(this).hide();
   });
});

（我这样用它来附加图像。）

Answer 3

文档指出

将元素的轮廓传输到 另一个元素

所以，这里不涉及隐藏。

如果您确实想隐藏该元素，您所要做的就是在效果之后链接

hide()

函数：

$("div.click").live('click', function () {
      var i = 1 - $("div.click").index(this);
      $(this).effect("transfer", { to: $("span.target").eq(i) }, 1000).hide();
});

请不要 - 我没有测试你的代码 - 我刚刚添加了隐藏部分，所以我不确定它是否有效:)