Animate float positions in jQuery 1.5

Posted Feb 23 2011

The question of how to animate an element using floats, or floated elements (ie. float: left, float: right), was posed on Quora the other day and it inspired me to make a quick plugin to achieve this simple task. Out of the box jQuery doesn’t support animating a float postion to the right or left; thus a plugin is born.

I’ll note that I made this as a jQuery 1.5 plugin. You’ll notice I make good use of the sub() function found in latest version of jQuery. Going forward you should see more plugin authors using this kind of structure.

You’ll notice that I create an instance of the jQuery object using sub() and then alias it within the variable $plugin. I can now use my modified version of jQuery’s native animate() outside of the anonymous function if I wanted to. Being able to modify native jQuery methods comes in handy and should be really exciting for plugin authors.

Click on the “Result” tab of the embedded JS Fiddle code example to get the full effect of the animation in action.


[...] although it’s not nicely packed into the core, there are plugins (like John Reisg’s and mine) that enable this [...]

Trevor Posted: Mar 15, 2012 @ 12:44pm

Fantastic work on this! One question: is there any way to call this plugin remotely? I’d like to trigger and element to animate inline with a larger script, but can’t figure it out. Thanks!

Leave a Reply: