Transition Between Elements With Fancy Effects Using jQuery - Elegant Transition
File Size: | 30 KB |
---|---|
Views Total: | 990 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.