转移效果不起作用(我有一个ui效果转移的风格!)

时间:2011-09-12 22:23:32

标签: jquery jquery-ui

我无法使jQuery UI Transfer效果起作用。 StackOverflow上的类似问题通过指定.ui-effects-transfer样式来解决,但我有。我正在尝试从#popup到#target创建一个传输效果。这是我的代码。提前致谢。

    <html>
        <head xmlns="http://www.w3.org/1999/xhtml">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Test</title>
        <style type="text/css" rel="stylesheet">

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

        #popup {        
            position: absolute;
            width: 100px;
            height: 100px;
            top: 20px;
            left: 20px;
            background-color: red;
        }

        #target {
            position: absolute;
            height: 50px;
            width: 50px;
            top: 500px;
            left: 500px;
            background-color: blue;
        }       
    </style>

    <script type="text/javascript" src="jquery-1.6.3.js"></script>
    <script type="text/javascript" src="jquery.effects.core.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {      

            var $popup = $('#popup');       
            $popup.click(function() {
                $popup.effect('transfer', {to: $('#target')}, 2000);                        
            });     
        }); 
    </script>
</head>
<body>    
        <div id="popup">        
        </div> 

        <div id="target">       
        </div> 
</body>

2 个答案:

答案 0 :(得分:0)

我发现了这个问题。我还必须链接到jquery.effects.transfer脚本。显然每个效果都有自己的js文件。

答案 1 :(得分:0)

您需要在选项中添加类ui-effects-transfer,并简单地为to:提供目标css标识符,而不提供jquery标识符,即to: "#target"

最后你的代码应该是这样的:

$popup.effect('transfer',to: '#target',className:'ui-effects-transfer' 2000);

see the code source here选择效果为&#34;转移&#34;。