Swap and Re-Order Divs Smoothly Using jQuery – Swapsies Plugin

July 9th, 2010 - Posted by Steve Marks to Javascript / jQuery, Web Development.

Swapping Two Divs Smoothly with jQuery

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:

View a Demonstration

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.

This entry was posted on Friday, July 9th, 2010 at 6:13 pm by +Steve Marks and is filed under Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (13)
  1. CK says:

    Exactly what I needed, thanks a million!

  2. Demir says:

    Excellent, flawless, perfect :)

  3. TiTo says:

    Realy good!

  4. Thanks Nahuel. Look forward to seeing it in action…

  5. Nahuel says:

    Exactly what I was looking for. I’ll show you where I applied it once it’s finished, in case you’re interested :)

  6. Dakster says:

    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?

  7. cc says:

    Might be worth noting that it doesn’t swap them in the DOM, it is just a spatial rearrangement.

  8. Data says:

    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.

  9. @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();
    });

  10. shotemba says:

    Hi Steve,

    Nice one mate, just what I was after.

  11. mo says:

    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.

  12. fruell says:

    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 )