2011-09-12 34 views
1

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

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

看起来在这里效果很好... 您使用的是IE,Chrome还是FF? [http://jsfiddle.net/9K8TD/](http://jsfiddle.net/9K8TD/) – Eriksberger

+0

我已经在Firefox 6.0和IE 9中试过了。这真是莫名其妙。 – Vish

回答

0

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

0

您需要添加ui-effects-transfer类的选项,只是给出to:目标CSS标识而不给如jQuery的标识即to: "#target"

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

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

see the code source here通过选择效果作为“转移”。