Transition Between Elements With Fancy Effects Using jQuery - Elegant Transition

Elegant Transition is a lightweight jQuery plugin which adds configurable, cross-browser 'Blinds' and/or 'Sweep up' transition effects to elements when you switch between them. These effects could be particularly useful in some slider/carousel/slideshow cases.

How to use it:

1. Load the required CSS file elegant_transition.css in the head section of the document.

<link href="elegant_transition.css" rel="stylesheet">

2. Create 2 block element you want to switch between.

<div class="wrap" id="transition-wrap">
  <div class="box box1">
    <div class="inner"> 
      Box 1 element
    </div>
  </div>
  <div class="box box2">
    <div class="inner">
      Box 2 element
    </div>
  </div>
</div>

3. Load JQuery library and the JavaScript file elegant_transition.js at the end of the document.

<script src="//code.jquery.com/jquery.min.js"></script> 
<script src="jquery.elegant_transition.js"></script> 

4. Active the transition effect.

$('#transition-wrap').elegantTransition();

5. Create a trigger element to switch between the element you just created.

<div class="trigger">Click me</div>

6. Config the transition effect with the following options.

$('#transition-wrap').elegantTransition({

  // sets the transition speed
  speed: 500, 

  // "blinds", "incblinds" or "sweep"
  effect: 'blinds', 

  // sets the number of slices (max 10)
  slices: 5 
  
});

---

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