Cross-fading Page Transition Effects With jQuery - M-PageTransition

File Size: 5.92 KB
Views Total: 5003
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Cross-fading Page Transition Effects With jQuery - M-PageTransition

M-PageTransition is a lightweight jQuery plugin for displaying smooth fade In/out transition effects when the users navigate through your webpages.

How it works:

Fades the page from a given color to show the content and fades out to the given color.

How to use it:

1. Add the latest version of jQuery library and the jQuery M-PageTransion plugin's script to the webpages.

<script src="//"></script>
<script src="m-pagetransition.js"></script>

2. Load the official jquery-color plugin for color manipulation and animation support (OPTIONAL).

<script src=""></script>

3. Add the CSS class 'm-pagetransition' to the body tag.

<body class="m-pagetransition">

4. Set the initial visibility to 'hidden' on page loaded.

.m-pagetransition {
  visibility: hidden;

5. Call the function on the body tag and the plugin will do the rest.


6. Config the page transition effect with the following settings.


  // the color valuethat the page will fade to
  color: "#ffc107",

  // animation speed in milliseconds
  fadeOutTime: 300,
  fadeInTime: 300


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