Tutorials Point

  jQuery Tutorial
  jQuery UI
  jQuery References
  jQuery Resources
  Selected Reading

Copyright © 2014 by tutorialspoint

  Home     References     Discussion Forums     About TP  

jQuery Transfer Effect

previous next AddThis Social Bookmark Button



The Transfer effect can be used with effect() method. This Transfers the outline of an element to another element. Very useful when trying to visualize interaction between two elements.


Here is the simple syntax to use this effect:

selector.effect( "transfer", {arguments}, speed );


Here is the description of all the arguments:

  • className: Optional class name the transfer element will receive.

  • to: jQuery selector, the element to transfer to.


Following is a simple example a simple showing the usage of this effect:

<title>the title</title>
   <script type="text/javascript" 
   <script type="text/javascript" 
   <script type="text/javascript" language="javascript">
    $(document).ready(function() {

       $("div").click(function () {
         var i = 1 - $("div").index(this);
         $(this).effect("transfer",{ to: $("div").eq(i) }, 500);

   div.green { margin: 0px; width: 100px; height: 80px; 
       background: green; border: 1px solid black; 
       position: relative; }
   div.red { margin-top: 10px; width: 50px; height: 30px; 
       background: red; border: 1px solid black; 
       position: relative; }
   /* Following is required  to show border while transferring.*/
  .ui-effects-transfer { border: 2px solid black; }

   <p>Click any of the squares:</p>
   <div class="green"></div>
   <div class="red"></div>

To understand it in better way you can Try it yourself.

previous next Printer Friendly