jQuery cssAnimateAuto Examples

Basic

And so it grows rightwards.

1 $('#basic-height-btn').click(function() {
2   $('#basic-height-content').cssAnimateAuto();
3 });
4 $('#basic-width-btn').click(function() {
5   $('#basic-width-content').cssAnimateAuto('width 0.3s');
6 });

The Accordion

Megrim: n. A form of headache usually confined to or beginning or predominating on one side of the head.

n. (plural) Lowness of spirits, as from headache or general physical disturbance; the 'blues'; a morbid or whimsical state of feeling.
Giffgaff: n. Mutual or reciprocal giving and taking; mutual obligation; tit for tat.
Chawbacon: n. A person who is not very intelligent or interested in culture.

I contend for it that all our civilisation is higher, and that class for class we are in a more advanced culture than the English; that your chawbacon is not as intelligent a being as our bogtrotter; that your petty shopkeeper is inferior to ours; that throughout our middle classes there is not only a higher morality but a higher refinement than with you.

— Charles Lever, Lord Kilgobbin

1 $('.accordion-trigger').click(function() {
2   $(this)
3     // Spin the triangle.
4     .toggleClass('is-active')
5     // Open the body.
6     .next('.accordion-body').cssAnimateAuto();
7 });

The Dropdown Menu

Demonstrating the following:

a custom CSS transition
a custom openClass
how the plugin integrates into slightly more complicated JavaScript/jQuery activities

Reduce your viewport size to see how the menu responds: the smoothly-animating dropdown becomes a smoothly-animating accordion.

 1 var ddActiveClass = 'is-active',
 2     // Some custom plugin settings.
 3     settings = {
 4       transition: 'height 0.5s cubic-bezier(.31, .48, .28, .95)',
 5       openClass: ddActiveClass
 6     };
 7 // Toggle when a trigger is clicked.
 8 $('.dropdown-menu > li > a').click(function() {
 9   var trigger = this,
10       $otherOpenTriggers = $('.dropdown-menu > li > a')
11         .not(trigger)
12         .filter('.' + ddActiveClass);
13   function toggleSelf () {
14     $(trigger).toggleClass(ddActiveClass)
15       .siblings('ul').cssAnimateAuto(settings);
16   }
17   // If other items are open, close them before toggling.
18   if ($otherOpenTriggers.length > 0) {
19     $otherOpenTriggers.removeClass(ddActiveClass)
20       .siblings('ul').cssAnimateAuto('close', settings);
21   }
22   // Do the toggling.
23   toggleSelf();
24 });

These Show/Hide the JS Buttons

How do they work? Have a look. They use a callback to disable the button once the transition/animation is complete.

 1 function toggleCode ($clicked, action) {
 2   var codeTransition = 'height 0.3s linear',
 3       whichCode = $clicked.data('code'),
 4       oppositeAction = (action === 'open') ? 'close' : 'open';
 5   $('#code-' + whichCode).cssAnimateAuto(action, codeTransition, function() {
 6     $('#' + oppositeAction + '-code-' + whichCode).prop('disabled', false);
 7     $clicked.prop('disabled', true);
 8   });
 9 }
10 
11 $('.open-code').click(function() {
12   toggleCode($(this), 'open');
13 });
14 
15 $('.close-code').click(function() {
16    toggleCode($(this), 'close');
17 });