- jQuery Tutorial
- jQuery - Home
- jQuery - Overview
- jQuery - Basics
- jQuery - Syntax
- jQuery - Selectors
- jQuery - Events
- jQuery - Attributes
- jQuery - AJAX
- jQuery DOM Manipulation
- jQuery - DOM
- jQuery - Add Elements
- jQuery - Remove Elements
- jQuery - Replace Elements
- jQuery CSS Manipulation
- jQuery - CSS Classes
- jQuery - Dimensions
- jQuery - CSS Properties
- jQuery Traversing
- jQuery - Traversing
- jQuery - Traversing Ancestors
- jQuery - Traversing Descendants
- jQuery References
- jQuery - Utilities
- jQuery Plugins
- jQuery - Plugins
- jQuery - PagePiling.js
- jQuery - Flickerplate.js
- jQuery - Multiscroll.js
- jQuery - Slidebar.js
- jQuery - Rowgrid.js
- jQuery - Alertify.js
- jQuery - Progressbar.js
- jQuery - Slideshow.js
- jQuery - Drawsvg.js
- jQuery - Tagsort.js
- jQuery - LogosDistort.js
- jQuery - Filer.js
- jQuery - Whatsnearby.js
- jQuery - Checkout.js
- jQuery - Blockrain.js
- jQuery - Producttour.js
- jQuery - Megadropdown.js
- jQuery - Weather.js
- jQuery Useful Resources
- jQuery - Questions and Answers
- jQuery - Quick Guide
- jQuery - Useful Resources
- jQuery - Discussion
jQuery Effect - Transfer Effect
Description
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.
Syntax
Here is the simple syntax to use this effect −
selector.effect( "transfer", {arguments}, speed );
Parameters
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.
Example
Following is a simple example a simple showing the usage of this effect −
<html> <head> <title>The jQuery Example</title> <script type = "text/javascript" src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"> </script> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"> </script> <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); }); }); </script> <style> 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; } </style> </head> <body> <p>Click any of the squares:</p> <div class = "green"></div> <div class = "red"></div> </body> </html>
This will produce following result −
jquery-effects.htm
Advertisements