Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
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 });
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 });
Demonstrating the following:
openClass
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 });
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 });