Fork me on GitHub
Tongue

Tongue jQuery Plugin Download

Its a very simple jQuery plugin which allows you to add animated dropdown child element to any elements without using any CSS styles for that.

Checkout my blog for other resources.

Example 1 Hover the image

Flower
Example Image
Name: flower.png
Size: 68.7 kB
Photography: Sana Amrin
Edit Delete

Example 2 Hover the image

Child

Usage:

  1. Download the jQuery Tongue plugin.
  2. Add the jquery.tongue script in your head section. Also make sure jQuery 1.7+ is loaded. 
    <script type="text/javascript" src="jquery.tongue.js"></script>
  3. HTML Sample 
    <div id="tongue">
	<img src="assets/img/child.jpg" alt="Child" /> <!-- Main element, can be image or anything. -->
	<div class="tongue-content">Tongue Content</div> <!-- Content to be shown as tongue.  -->
</div>
  4. JavaScript / jQuery Code: 
    $('#tongue').tongue();

Options:

Option Description Default
position Position of dropdown content, top or bottom. bottom
tongue_content Selector for element containing the content to be shown as tongue. .tongue-content
start_speed Speed in millisecond while sliding down. 500
end_speed Speed in millisecond while sliding up. 400

Options Usage Example:

$('#tongue').tongue({
	'position'      : 'bottom',
	'tongue_content': '.tongue-content',
	'start_speed'   : 500,
	'end_speed'     : 400
});