jQuery Plugin For Revealing Alternative Content On Hover Over - Hover Panels

jQuery Plugin For Revealing Alternative Content On Hover Over - Hover Panels
File Size: 37.6KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Hover Panels is a lightweight, touch ready and cross browser jQuery plugin that allows you to display alternative content with animated fade effect when mouse hovers over. Check the demo to see it in action.

See also:

How to use it:

1. Include jQuery library and jQuery Hover Panels on your web page, before </body> tag

<script src="js/vendor/jquery-1.9.1.min.js"></script> 
<script src="js/jquery.hoverpanels.js"></script> 

2. Markup html structure

<div class="hoverpanels">

<div class="panel">
<h1>Panel 1</h1>
<div class="default">
[Default content 1]
</div>
<div class="hover">
[Alternative content 1]
</div>
</div>

<div class="panel">
<h1>Panel 2</h1>
<div class="default">
[Default content 2]
</div>
<div class="hover">
[Alternative content2 ]
</div>
</div>

...

</div>

3. Call the plugin

<script>
(function(){
    $('.hoverpanels').hoverpanels();
}());
</script> 

4. Options

<script>
(function(){
    $('.hoverpanels').hoverpanels({
    default_content: '.default', // Class of default content
    hover_content: '.hover', // // Class of alternative content
    fade_level: '0.5', // fade level
    effect: 'fadeSiblings' // fading effect, fadeSiblings or none
    });
}());
</script> 

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