Learning jQuery

You must have seen floating elements on many sites and it can be done with CSS. But today I will show you how can you provide floating effect to elements using jQuery. The advantage of doing this with jQuery is that you can provide animate and also control the speed of the animation of floating element.

jqFloat.js is a jQuery plugin that able to make any HTML objects appear to be "floating" on your web page. It helps create simple floating animation and make your websites come alive with these little "floating" object.

You can have several "floating" objects with different attributes within your web page. Also, you might make these floated objects "landing" through plugin’s method, and vice versa of course.

jqFloat.js uses jQuery .animate() method with infinity loop to animate object’s to different positions, thus it make the object appears to be floating on the web page. It also uses jQuery .data() method to store and keep track of each object’s attributes and status. And it works well in all browsers like IE6 and above, Firefox and Webkit browsers.

To use this plugin, all you need to do is to download and include the reference and call the "jqFloat()" method on the object.

//Code Starts
$(document).ready(function() {
   $('object').jqFloat();
});
//Code Ends

Available Options for customization

This plugin also provides some options for customization of the floating animation.

width
Type: Int, Default: 100
Maximum horizontal floating area. The value will be divided by 2 and append to object left and right.

height
Type: Int, Default: 100
Maximum vertical floating area. The value will be divided by 2 and append to object top and bottom.

speed
Type: Int, Default: 1000
Maximum floating speed.

minHeight
Type: Int, Default: 0
The distance of floating object from bottom/surface.

//Code Starts
$(document).ready(function() {
   $('object').jqFloat({
 width: 300,
 height: 300,
 speed: 100
   });
});
//Code Ends

See result below.

Available Methods

This plugin also provides 2 methods which allows to start and stop the floating animation.

Play (or no method specified): Start floating animation and Stop: Start landing animation (stop floating animation).

//Code Starts
$(document).ready(function() {
   //stop landing animation
   $('object').jFloat('stop');
   //start the floating animation
   $('object').jFloat('play');
});
//Code Ends

Feel free to contact me for any help related to jQuery, I will gladly help you.