During the life cycle of most web projects we work on here at First Impression there is always a common set of jquery scripts which we tend to use to add extra functionality and wow factor to a website .

Here is part 1 of our top 10 favourite jquery effects.

1) InnerFade Plugin

Summary 

The jQuery InnerFade is a small plugin which allows you to fade any element inside a container in and out.

The Code

<script type="text/javascript">

$(document).ready( function(){
<pre id="line1"> $('.slider').innerfade({ speed: 'slow', timeout: 4000, type: 'sequence', containerheight: '1.5em' }); } ); 

</pre>
</script>

In action http://copy-writer.co.uk/copywriting-experience.php (The image cycle in the sidebar)

2) Image hover fade

Summary 

A subtle effect which changes the opacity of an image as you hover over it, nice for adding polish to a completed project

The Code

<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
$("img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 60% when the page loads
$("img").hover(function(){
$(this).fadeTo("slow", 0.6); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 60% on mouseout
});
});
// ]]></script>

Based on this script – http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

In action – http://www.firstimpression.co.uk/clients.php (hover over a client logo)

3) Superfish menu

Summary 

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds the following much-sought-after enhancements:

* Suckerfish-style hover support for IE6.
* Timed delay on mouseout
* Animation of sub-menu reveal
* Keyboard accessibility.
* Supports the hoverIntent plugin.
* Indicates the presence of sub-menus by automatically adding arrow images to relevant anchors.
* drop shadows for capable browsers
* Can show the path to your current page while the menu is idle.

In action – http://www.uccmma.com (hover over fighters in the navbar)

Visit plugin website – http://users.tpg.com.au/j_birch/plugins/superfish/

4) Coin Slider

Summary 

Coinslider is a very flexible image slider with lots of unique effects. The script is cross browser compatable, can be customised to meet your requirements and can turn a boring set of images into a funky interactive slideshow!

Visit plugin website - http://workshop.rs/projects/coin-slider/
In action – http://www.colourmobilevms.com (the image slideshow in the black feature box)

5) UI Accordion

Summary 

After experimenting with several accordion scipts, this JQuery UI version always prevails! It is very easy to install, it includes an array of configuration options and can be skinned very easily using the available UI themes.
The Code

<script type="text/javascript">// <![CDATA[
$(function() {
$("#accordion").accordion();
});
// ]]></script>

Visit plugin website - http://jqueryui.com/demos/accordion/
In action – http://www.smilequest.co.uk/fags.html (Click on a question to reveal answer)

Keep an eye out for part two of this article which will be following shortly.

If you enjoyed this article feel free to share it below using one of your favourite social networks.