jQuery Plugin For Smooth Rollover Image Effects - imageChanger

File Size: 464 KB
Views Total: 4181
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Smooth Rollover Image Effects - imageChanger

imageChanger is a jQuery plugin for rollover image effect that changes the image at same place with smooth cross fade animation when mouse over.


  • Smart image preloading.
  • Custom cross fade animations.
  • Supports touchstart and touchend on mobile devices.
  • Supports switch background images.

How to use it:

1. Include the jQuery library and the jQuery imageChanger plugin in the html document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.imageChanger.min.js"></script>

2. Prepare two images with the same height and width. Add a custom suffix to the 'after' image i.e. demo.png and demo_on.png.

3. Insert the 'before' image in an Html element.

<p class="rollover"><img src="images/demo.png" alt="Demo Image"></p>

4. Call the plugin with default settings.

<script type="text/javascript">

5. Available options.


// custom suffix
suffix: "_on", 

// change images on mouse hover
hover: true,

transition: {

  // fade, slide, wink or false
  type: "fade",

  // animation duration time
  duration: 150,

  // jQuery easing effect
  easing: "linear",
  opacity: 0

// enable background image support
backgroundImage: false, 

// allowed image types
imageType: "jpg|jpeg|gif|png",

// Callbacks
beforeInit: false,
afterInit: false,
beforeChange: false,
afterChange: false,
beforeOnImage: false,
afterOnImage: false,
beforeOffImage: false,
afterOffImage: false


Change logs:


  • v2.1.1


  • Fix startOn bugs


  • added more options.


  • v2.0.5


This awesome jQuery plugin is developed by tsuyoshiwada. For more Advanced Usages, please check the demo page or visit the official website.