jQuery Plugin For Element Slide-in Animations - SlideIn

Slidein is a super tiny jQuery plugin that uses CSS and jQuery animate() function to smoothly slide elements into view, at a certain speed and from any position.

How to use it:

1. Download and include the jQuery Slidein plugin after jQuery JavaScript library.

<script src="jquery-1.11.3.min.js"></script>
<script src="js/jquery.slideIn.js"></script>

2. Make sure to hide the element you want to slide in.

#element {
  display: none;  
  ...
}

3. The plugin provides 5 methods to slide in elements from left/right/down/up or any corner.

$('#element').slideInLeft({

// animation speed
speed : 400,

// how far away the animation begins
distance : '100px',

// start opacity level
startOpacity : '0',

// opacity speed
opacitySpeed : 400,

});

$('#element').slideInRight({

speed : 400,
distance : '100px',
startOpacity : '0',
opacitySpeed : 400,

});

$('#element').slideInDown({

speed : 400,
distance : '100px',
startOpacity : '0',
opacitySpeed : 400,

//  Tells the animation to come from the top
comeDown: true,

// Tells the animation to come from the bottom.
comeUp: null,

});

$('#element').slideInUp({

speed : 400,
distance : '100px',
startOpacity : '0',
opacitySpeed : 400,
comeDown: null,
comeUp: true,

});

$('#element').slideInDiagonal({

speed : 400,
distance : '100px',
startOpacity : '0',
opacitySpeed : 400,

// left position
left : true,

// right position
right : null,

comeDown: null,
comeUp: null,

});

---

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