Easy jQuery Fading Slide Toggle Plugin

File Size: 3.88KB
Views Total: 3360
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Easy jQuery Fading Slide Toggle Plugin

Fading Slide Toggle is a jQuery plugin for creating a slide down/up animation attached to an html element as you toggle the trigger, with smooth fading effects and easing options.

Basic Usage:

1. Load the jQuery library and jQuery fading slide toggle plugin at the bottom of your page to reduce the page load time

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.fadingslidetoggle.js"></script>

2. Create a trigger

<a id="clickme">Click Me</a>

3. Create an html element attached to the trigger

<nav id="demo">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</nav>

4. Call the plugin

<script>
$(function(){
$('#clickme').fadingSlideToggle('#demo');
});
</script>

5. Options

$.fn.fadingSlideToggle = function($el, options) {
var defaults = {
duration:500,
easing:'swing',
trigger:'click'
};

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