Confusion about jQuery UI transfer

Question

I want to use jQuery UI transfer() method to hide an element.

I have a 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 the demo I downloaded it was 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

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.