jQuery Plugin To Create Sliding Boxes Over Html Elements - slidebox

File Size: 9.91 KB
Views Total: 1410
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Create Sliding Boxes Over Html Elements - slidebox

slidebox is a jQuery plugin which enables you to add animated hover effects covering any Html elements. Useful for creating an image caption overlay that displays more details about the image.

How to use it:

1. Include the jQuery slidebox plugin and other necessary files in the Html page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.coalesce.js"></script>
<script src="jquery.hoverIntent.js"></script>
<script src="jquery.slidebox.js"></script>

2. Include the JQuery easing plugin for easing options (OPTIONAL).

<script src="jquery.easing.js"></script>

3. The Html to create a sliding box where one panel slides over the other on mouse hover. Pass the options to the sliding box through Html5 data-* attributes.

<div class="slidebox" 
data-easing="easeOutBounce" 
data-speed="800" 
data-animate-background="false" 
data-direction="up" 
data-hangover="30" > 
<img src="1.jpg" />
<div class="fg"> Description </div>
</div>

4. Stylize the sliding box via CSS.

.slidebox {
display: inline-block;
margin: 20px;
}
.slidebox .fg {
background-color: #e74c3c;
}

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