jQuery marching ants outlines. Generate required GIF images here: http://ants.toyls.com
HTML JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



v1.0 - Early preview version

Copyright © 2015 Martijn W. van der Lee. Licensed under the MIT license.

jQuery marching ants outlines


jQuery v1.7.1 or higher required.

Current version: https://github.com/vanderlee/ants/archive/master.zip

Source code on Github: https://github.com/vanderlee/ants


This plug-in relies on the presence of two animated GIF images. Examples are included to match the default settings. If you want different sizes, colors or patterns, you can use this free Marching Ants generator at http://ants.toyls.com or create them manually.

Future plans

  • Option "delay" (integer).
  • Option "zIndex" (integer).
  • Handle GIF's with options.
  • Automatically detect GIF width/height.
  • Research excessive negative offset event triggering.
  • Unittests



Attaches ants to the children of this element.


appendTo: "element"

Append the marching ants DOM elements to the specified selector. Use 'element' to append to the element used as a container.

Cannot be set using option method.

attachOn: 'hover'

Change when to attach the ants to a DOM element. Either hover to or focus.

classname: ''

Add the specified classname(s) to the DOM elements making up the marching ants. Use this classname to specify different animated GIF pictures in CSS.

offset: 0

By default, the marching ants are an outline. Set the offset positive to move the marching ants outwards away from the edges. Set the offset negative to move the marching ants inwards.

reverse: false

Reverse the direction of the marching ants.

select: null

Specify which children of the container element may receive the marching ants. If null, all direct descendants will be eligible.

thickness: 4

Set the thickness of the marching ants. This should be half (or less) of the width/height of the animated GIF pictures used.



Get the currently attached element as a jQuery object. If not currently attached, return undefined.

option (optionName)

Get the value of the specified option.

option (optionName, optionValue)

Set the value of the specified option and update the


Set the values of multiple options at once.


attach: null

Triggers when the ants attach to a new element. Function callback with signature function(element). this is also set to the attached element.

detach: null

Triggers when the ants detach from the previously attached element. Function callback with signature function(element). this is also set to the detached element.