Pourquoi cet effet de transfert simple jquery ne fonctionne pas?

Question

le code html du corps:

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

alors le code js:

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

bien sûr j'importer le

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

vous pouvez voir la mauvaise ligne :http://jsfiddle.net/hh54188/wz2J3/

l'effet "shake" ci-dessous pourrait fonctionner, mais le trans fer does't travail donc, comment résoudre le problème? merci

Answer 1

Il est travail, il n'y a tout simplement pas de classe/style si vous ne voyez pas la frontière, juste donner une classe que vous voulez que l'option className et donne à cette classe une bordure, etc ... tout ce que tu veux que le look soit.

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

Avec le style de cette classe:

.myClass { border: 2px dotted gray; } 

You can view your demo updated with these changes here.

Answer 2

de http://docs.jquery.com/UI/Effects/Transfer

L'élément de transfert a iself le nom de classe « effets ui-transfert », et doit être stylé par vous, par exemple en ajoutant un arrière-plan ou une bordure.

cela est dans l'exemple

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