2011-09-12 32 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通過選擇效果作爲「轉移」。