Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

jAni

jAni is a simple plugin for jQuery which allows you animate background images. The jAni loads a long vertical image and changes its background position with the speed you setup, giving you more control of the animation.

Basic Usage:

<script type="text/javascript">
$(document).ready(function(){
    $('#animation-1').jani({
        frameWidth: 100,
        frameHeight: 100,
        speed: 100,
        totalFrames: 19
    });
    $('#animation-1').jani.play();
});
</script>

Source: ajaxblender

Gritter

Gritter is a good jQuery Growl look-a-like plugin that looks the exact same as the one for Mac OS. Think of it as calling the alert() function in JavaScript, only it’s not a modal, it’s subtle and it doesn’t look like dog shit.

Basic Usage:

<script type="text/javascript">
$(document).ready(function(){
    $.gritter.add({
        // (string | mandatory) the heading of the notification         title: 'This is a notice!',
        // (string | mandatory) the text inside the notification         text: 'This will fade out after a certain amount of time.'
    });
});
</script>

Source: boedesign

Captify

Captify is a plugin for jQuery to display simple, pretty image captions that appear on rollover. That would be an awesome caption jQuery plugin for images: easy to use, small/simple, and completely ready for use in production environments. Also, it’s only 2.3kb!

Basic Usage:

<script type="text/javascript">
$(document).ready(function(){
    $(function(){
      $('img.captify').captify({
        // all of these options are... optional         // ---         // speed of the mouseover effect         speedOver: 'fast',
        // speed of the mouseout effect         speedOut: 'normal',
        // how long to delay the hiding of the caption after mouseout (ms)         hideDelay: 500,
        // 'fade', 'slide', 'always-on'         animation: 'slide',     
        // text/html to be placed at the beginning of every caption         prefix: '',     
        // opacity of the caption on mouse over         opacity: '0.7',                 
        // the name of the CSS class to apply to the caption box         className: 'caption-bottom',    
        // position of the caption (top or bottom)         position: 'bottom',
        // caption span % of the image         spanWidth: '100%'
      });
    });
});
</script>

Source: Third Route

StickyNote

It’s not really awesome plugin, but it’s a good idea for jQuery plugin. StickyNote help you create a note in your webpage that help you to remind something to yourself. The sticky note can be dragged, dropped into any part of the page, and it can be easy to post a note.

Basic Usage:

<script type="text/javascript">
$(document).ready(function(){
  $(function() {
    var img = new Image();
    $(img).attr('src','http://yourdomain/images/stickynote-large.png');
    $(img).load(function() {
        $("#content").stickynote({
            size             : 'large',
            text             : 'Don\'t forget to buy beans!',
            containment      : 'content',
            event            : 'dblclick'
        });
    });     
  });
});  
</script>

Source: Tympanus

FormHighlighter

FormHighlighter is a simple jQuery Plugin, used to scan through your webpage and automaticly attach focus,blur and keydown effect on your form fields. You can scan throught your webpage by: full scan, specific scan, specific scan with color definition, or specific scan with CSS class by using its options.

Basic Usage:

<script type="text/javascript">
$(document).ready(function(){
    $(document).formHighlighter();
});  
</script>

Source: SAUCER