Swap and Re-Order Divs Smoothly Using jQuery – Swapsies Plugin
Well, it’s about time but I’ve finally taken the plunge and wrote my first jQuery plugin. I’ll admit, the decision wasn’t voluntary but a scenario on a recent project required a specific function that I couldn’t find had been previously catered for so I decided to kill two birds with one stone; complete the project and learn about the construction of jQuery plugins whilst putting it online for other people to use should they find themselves in a similar situation.
The requirement was to be able to swap two divs smoothly. Not just swap the contents of the divs in question, that was too easy, but to physically move the divs. One div to where the second div was positioned and vice versa, making the animation visible to the user to emphasise the movement.
After reading a few tutorials and a bit of debugging I had done it. The results of which can be seen below:
Installation
If you’d like to incorporate the Swapsies plugin into your own site, I have included a simple step-by-step below on how to do so:
1) Download the jQuery library here
2) Download the Swapsies plugin here
3) Include the scripts in your HTML like so, changing the paths to match where the JS files are located:
<script src="/js/jquery.js" type="text/javascript"></script> <script src="/js/jquery-swapsies.js" type="text/javascript"></script>
4) Create the two divs you would like to swap, plus a trigger that will activate the swapping animation:
<div id="div_1">THIS IS DIV 1</div> <div id="div_2">THIS IS DIV 2</div> <a href="javascript://" class="go-swap">Go Swap!</a>
The HTML explained:
Div 1 (#div_1) – The first div on our page. This is one of the divs that will be swapped
Div 2 (#div_2) – The second div on our page. The other div that will be swapped
The trigger (.go-swap) – When clicked the swapping will commence. In our case this is a link but can be an image, a button or anything else you desire.
5) The final Javascript to bring our page to life:
$(document).ready(function() { $(".go-swap").click(function() { $("#div_1").swap({ target: "div_2", // 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: 1000, // Optional. The time taken in milliseconds for the animation to occur callback: function() { // Optional. Callback function once the swap is complete alert("Swap Complete"); } }); }); });
Well there we have it. I hope that wasn’t too painful for you. If you have any questions with regards to integrating it into your site or have any suggestions on how the plugin could be improved simply leave a comment below.
Hi,
Little trick. If you want to move multiple div at same time, simply put the var ‘swapping’ of jquery-swapsies in the function.
It was crutial for me. I had to swap more than 20 divs simultaneously, and only one swaps was made on click :)
Exactly what I needed, thanks a million!
Excellent, flawless, perfect :)
Realy good!
Thanks Nahuel. Look forward to seeing it in action…
Exactly what I was looking for. I’ll show you where I applied it once it’s finished, in case you’re interested :)
This works really well at 100% browser zoom (I’m using Chrome). But change the browser zoom and it all gets a bit confused. anyone know of a fix for this?
Might be worth noting that it doesn’t swap them in the DOM, it is just a spatial rearrangement.
Hi Steve,
Really cool stuff, nice to see that jQuery goodness brimming up all over the place! I look forward to seeing more in the future.
@mo – You don’t need to use a plug in to achieve this. jQuery has built-in functions called fadeIn() and fadeOut(). Use a callback to help a smooth transition. For example:
$(‘#div1’).fadeOut(‘fast’, function() {
$(‘#div2’).fadeIn();
});
Hi Steve,
Nice one mate, just what I was after.
Hi, is there a way to use this to make one div fade in and the other fade out? I want to use it to fade between content when someone clicks on menu items.
Nice plugin, thank you Steve!
To archive an actual swap I use the following callback:
$(“#div_1”).removeAttr(“style”);
$(“#div_2”).removeAttr(“style”);
var tmp = $(“#div_1”).html();
$(“#div_1”).empty().append($(“#div_2”).html());
$(“#div_2”).empty().append(tmp);
NB: The empty().append() is a workaround to stop Firefox3 from adding (c.f. http://stackoverflow.com/questions/3736474/firefox-add-a-xmlnshttp-www-w3-org-1999-xhtml )