Hey friend, in the previous jQuery Learning tutorial, I wrote an article that helps you to create your own jQuery plugin with the fun zooming effect. This plugin has received a lot of attention for a while and there are some suggestion from you guys to help this plugin to be better. I collected some interesting recommendations and bug fixes from my readers to write it again and release it. This plugin now is more flexible, easy to customize and working with all major web browsers with any size of images. Sounds cool? Enjoy it!
Update: The icons used in this tutorial can be found free here.
There are many posts available detailing how to write your own jQuery plugin. It won’t take long before you realize that building in jQuery is very simple. Continuing in our jQuery Learning Series, here we’re going to build your first jQuery plugin. It’ll generate a bubble effect for your menu list and we’re going to call it BubbleUP.
What is BubbleUP? BubbleUP is a fun and easy plugin to get you started in jQuery. The effect is a nice starting point for learning the basics and many of the steps involved in creating other more intricate plugins you will make in the future. With this plugin, images in a list will enlarge with a smooth animation when you move your mouse over it. Then, if you move the mouse out, it will reset to the original size with the same smooth animation.
You might be familiar with the plugin jQuery Dock which allows developers to create a menu like Apple Dock. Today, you will create a similar menu with bubble effect by using CSS only. Although it doesn’t have as smooth of an effect as jQuery Dock, it’s helpful for those that just want to make a cool menu by using pure CSS. This tutorial includes two methods: CSS sprites (basic) and the image swapping (advanced).