1) TipTip – TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS.
Visit Plugin Site | View demo (hover over the links top right)

2) liScroll – liScroll is a jQuery plugin that transforms any given unordered list into a scrolling News Ticker.
Visit Plugin Site | View demo

3) Cycle – This is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more.
Visit Plugin Site | View demo

4) infoBar – A simple plugin that displays an information bar that looks similar to what most browsers are doing to show messages to a user.
Visit Plugin Site | View plugin demo

5) prettyPhoto – prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes. It’s a full blown media lightbox.
Visit Plugin Site | View plugin demo (click on prices)

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.

The site features a purple and grey colour palette/design which ties in with the companies existing business card/stationery branding. By using the website, interested visitors can find out more about Ontime Interiors, the services they offer, who they work with, view a gallery of the work Ontime carry out and then use the contact form to get in touch with the company.

Screenshots

Ontime Interiors - Homepage

Ontime Interiors - Services

Ontime Interiors - Project Gallery

You can view the Ontime Interiors website here.

Interested in having your own website?

If you liked the Ontime Interiors website and want to find out more about having a bespoke website which allows you to change/add content when required – give First Impression a call on 01457 857111