为什么这个jquery简单的传输效果不起作用?

时间:2010-11-17 02:20:28

标签: jquery user-interface transfer

正文html代码:

<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>

然后是js代码:

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

当然我已导入

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

你可以在线查看错误:http://jsfiddle.net/hh54188/wz2J3/

下面的“震动”效果可能有效,但转移不起作用 那么,如何解决问题呢?谢谢

2 个答案:

答案 0 :(得分:7)

来自http://docs.jquery.com/UI/Effects/Transfer

  

转移元素是自己拥有的   班级名称“ui-effects-transfer”,和   例如,你需要设计风格   通过添加背景或边框。

这是示例中的

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

答案 1 :(得分:4)

正在工作,没有类/样式,所以你看不到边框,只要给你想要的任何一个类作为className选项,并给该类一个边框,等......无论你想要什么样的。

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

使用该类的样式:

.myClass { border: 2px dotted gray; } 

You can view your demo updated with these changes here