Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


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:

Source code on Github:


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 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.


jQuery marching ants outlines. Generate required GIF images here:



You can’t perform that action at this time.