Swapsies - Swap Sample
Site: http://biostall.com/swap-and-re-order-divs-smoothly-using-jquery-swapsie-plugin
HTML
<script src="http://biostall.com/wp-content/uploads/2010/07/jquery-swapsies.js"></script>
<div id="div_1">THIS IS DIV 1</div>
<div id="div_2">THIS IS DIV 2</div>
<div id="div_3">THIS IS DIV 3</div>
<div id="div_4">THIS IS DIV 4</div>
<div id="div_5">THIS IS DIV 5</div>
<div id="div_6">THIS IS DIV 6</div>
<a href="javascript://" class="go-swap">Go Swap!</a>
CSS
div {
display:inline-block;
margin:10px;
background-color:#CCC;
text-align:center;
width:100px;
padding:10px
}
a {
display:block;
}
JavaScript
$(document).ready(function () {
$(".go-swap").click(function () {
$("#div_3").swap({
target: "div_4", // Mandatory. The ID of the element we want to swap with
opacity: "0.5", // Optional. If set will give the swapping elements a translucent effect while in motion
speed: 100, // Optional. The time taken in milliseconds for the animation to occur
callback: function () { // Optional. Callback function once the swap is complete
}
});
});
});