2011-09-12 10 views
1

jQuery UI転送エフェクトを動作させることができません。 StackOverflowに関する同様の質問は.ui-effects-transferスタイルを指定することによって解決されましたが、私はそれを持っています。 #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: "#target"

すなわちjqueryの識別子として与えることなくto:のターゲットCSSの識別子を与える必要があります。

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

see the code source here効果を「移転」として選択します。

関連する問題