jquery ui transfer help

Question

i wanna use jquery ui transfer to hide an element.

i got an div.click and a span.target. i want the div to be moved to the span when clicked.

i tried this code:

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

but nothing happens.

in their demo i downloaded it said that transfer is an option of "hide". but on their site it says its an option of "effect".

could someone help me understand how to use this?

Answer 1

The documentation states

Transfers the outline of an element to another element

So, no hiding is involved here.

If you do want to hide the element, all you have to do is chain the hide() function after your effect:

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

Please not - I did Not test your code - I just added the hide section, so I'm not sure it work :)

Answer 2

According to the documentation (which was rather difficult to find) you must style the ui-effects-transfer class (typically specifying a dashed border) in order to see the transfer in the first place.

The documentation of the hide() method is somewhat misleading though, you cannot use the "transfer" effect with hide(). However, if you do want to make the element invisible after the "transfer" effect is complete, you can use a callback as I've done in the following demo.

Working Demo: http://jsbin.com/iwijo (editable via http://jsbin.com/iwijo/edit)

P.S. I'm assuming that 1 - in your code was intentional and not a typo. Passing a negative index to eq() makes it select elements in reverse order.