Animated menu using jquery and sprite

This post explains how to make an animated menu using jquery and sprite.
http://www.shopdev.co.uk/blog/animated-menus-using-jquery/

The post is very easy to follow and explains very well.
This is a good example for hover function as well. It uses simple hover and animate function for opacity and speed. It uses .stop() to avoid a broken accordion effect.

$(function() {
  // set opacity to nill on page load
  $("ul#menu span").css("opacity","0");
  // on mouse over
  $("ul#menu span").hover(function () {
   // animate opacity to full
   $(this).stop().animate({
    opacity: 1
   }, "slow");
  },
  // on mouse out
  function () {
   // animate opacity to nill
   $(this).stop().animate({
    opacity: 0
   }, "slow");
  });
 });

Read the rest of this entry »

jquery.cookie.js plug-in

This is a nice way to keep a viewer's cookie so that when they come back they have the same settings. This can be used for text size or layout setting.

http://www.shopdev.co.uk/blog/cookies-with-jquery-designing-collapsible-layouts/

The code is simple and easy to understand what's going on.

I recommend to go through all the tutorials in this website or subscribe their RSS.
Read the rest of this entry »

jquery.toggleElements.js

I found quite few jquery plug-ins today. This is one of them.

http://jquery.andreaseberhard.de/toggleElements/index.html

At the beginning I thought why I need this, I can use normal toggle function!
Well then I found it is quite neat. You can use it in different ways and easy to use.
You can nest toggle sections in a toggled section as well.

You can download it here.
http://jquery.andreaseberhard.de/toggleElements/index.html
Read the rest of this entry »