Skip to content

Latest commit

 

History

History
102 lines (74 loc) · 2.38 KB

readme.md

File metadata and controls

102 lines (74 loc) · 2.38 KB

slide-anim

Light weight, stand alone, jQuery like slideDown / slideUp

Latest NPM release MIT License

demos

Usage

$ npm install --save slide-anim

then

import { slideDown, slideUp, slideStop, isVisible } from 'slide-anim';

var element = document.getElementById( 'panel' );

function onSlideUpButtonClick () {
	slideStop( element );
	slideUp( element );
}

function onSlideDownButtonClick () {
	slideStop( element );
	slideDown( element );
}

function onSlideStopButtonClick () {
	slideStop( element );
}

as a standalone JS lib

Copy slide-anim.js from /dist/slide-anim.js and place it in your project.

<script src="./js/slide-anim.js"></script>
var element = document.getElementById( 'panel' );

function onSlideUpButtonClick () {
	slideAnim.slideStop( element );
	slideAnim.slideUp( element );
}

function onSlideDownButtonClick () {
	slideAnim.slideStop( element );
	slideAnim.slideDown( element );
}

Functions

  • slideUp( element ) : Slide up
  • slideDown( element ) : Slide down
  • slideStop( element ) : Stop current slide animation. Useful to start another slide animation.
  • isVisible( element ) : return wheather the element is shown or display: none.

Options

param required
duration optional animation duration in ms. default is 400
display optional default CSS display, such as 'flex'. default is 'block'

e.g.

slideUp( element, {
	duration: 800,
	display: 'flex'
} );

Callbacks

slideDown and slideUp return a Promise.

e.g

slideUp( element ).then( function() {

	console.log( 'done!' );

} );