Why this jquery simple transfer effect doesn't work?

Question

the body html code:

<div style="background:yellow;width:500px;height:300px;">
    <div id="div1" style="background:red; width:100px;height:100px; float:left;"></div>
    <div id="div2" style="background:blue; width:50px;height:50px; float:right;"></div>
</div>

then the js code:

 $(function () {
        $("#div1").click(function () {
            $(this).effect("transfer", { to: $("#div2") }, 1000);
            //$(this).effect("shake", { times: 2 }, 200);
        });
    });

of course I have import the

<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>

you can see the bad online:http://jsfiddle.net/hh54188/wz2J3/

the below “shake”effect could work,but the transfer does't work so,how to solve the problem?thank you

Answer 1

It is working, there's just no class/styling so you don't see the border, just give any class you want as the className option and give that class a border, etc...whatever you want the look to be.

$(this).effect("transfer", { to: "#div2", className: "myClass" }, 1000);

With the styling for that class:

.myClass { border: 2px dotted gray; } 

You can view your demo updated with these changes here.

Answer 2

from http://docs.jquery.com/UI/Effects/Transfer

The transfer element iself has the class name "ui-effects-transfer", and needs to be styled by you, for example by adding a background or border.

this is in the example

.ui-effects-transfer { border: 2px solid black; }