Skip to main content
Ben Nadel at dev.Objective() 2015 (Bloomington, MN) with: Ryan Anklam
Ben Nadel at dev.Objective() 2015 (Bloomington, MN) with: Ryan Anklam ( @bittersweetryan )

jQuery Plugin To Make It Vibrate

By on

After my post on the release of jQuery 1.2, over lunch, I thought I would have some fun and try to make a jQuery plugin that takes absolutely positioned elements and causes them to vibrate upon mouse over. It's not all that well written, and it only works with absolutely positioned elements because I am not yet smart enough to figure out how to move relatively positioned elements. I know it's possible to do, since people do it for drag-n-drop, but I'm just not there yet.

So anyway, don't take this as any reference on how to write jQuery plugins - this was just for fun.

See vibrate() plugin in action (SAFE FOR WORK!!)

Here is the code for that page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Writing jQuery Plugin Demo</title>

	<style type="text/css">

		body {
			background-color: #000000 ;
			font-family: verdana ;
			}

		h1 {
			color: #FAFAFA ;
			font-weight: 400 ;
			}

		div {
			background-color: #000000 ;
			background-image: url( "jquery_logo.jpg" ) ;
			font-size: 1px ;
			height: 86px ;
			left: 300px ;
			line-height: 200px ;
			overflow: hidden ;
			position: absolute ;
			text-align: center ;
			top: 300px ;
			width: 241px ;
			}

	</style>

	<!-- Linked Files. -->
	<script type="text/javascript" src="jquery-1.2.pack.js"></script>
	<script type="text/javascript">

		// This jQuery v1.1.3 plugin will cause the targeted
		// elements to vibrate when they are moused over.

		jQuery.fn.vibrate = function(){

			// Loop over each of the elements in the jQuery
			// stack so that we can set up the properties
			// for the individual elements.
			this.each(
				function( intI ){
					// Get a jQuery object for this element.
					var jNode = $( this );

					// Default plugin to not be vibrating.
					var blnVibrate = false;

					// Get current position of the element.
					var intLeft = parseInt( jNode.css( "left" ) );
					var intTop = parseInt( jNode.css( "top" ) );


					// Create a function pointer that will
					// handle the updating of elements position
					// such that it will make it appear to be
					// vibrating.
					var fnUpdatePosition = function(){
						var intCurrentLeft = parseInt(
							jNode.css( "left" )
							);

						var intCurrentTop = parseInt(
							jNode.css( "top" )
							);


						// Check to see if we should keep going.
						if (blnVibrate){

							// Check to see which direction to
							// adjust in - either vert. or horz.
							if (Math.random() > .5){

								// Adjust vertically.
								if (intCurrentTop > intTop){
									intCurrentTop = (intTop - 2);
								} else {
									intCurrentTop = (intTop + 2);
								}

							} else {

								// Adjust horizontally.
								if (intCurrentLeft > intLeft){
									intCurrentLeft = (intLeft - 2);
								} else {
									intCurrentLeft = (intLeft + 2);
								}

							}

							// Set a timeout to call this method
							// again and update position.
							setTimeout(
								fnUpdatePosition,
								60
								);

						} else {

							// Reset position.
							intCurrentLeft = intLeft;
							intCurrentTop = intTop;

						}


						// Update the position.
						jNode.css(
							"top",
							(intCurrentTop + "px")
							);

						jNode.css(
							"left",
							(intCurrentLeft + "px")
							);
					}


					// Hoook up the mouse over event to flag
					// that the vibrating should begin.
					jNode.mouseover(
						function(){
							// Flag vibration.
							blnVibrate = true;

							// Start vibrating.
							fnUpdatePosition();
						}
						);


					// Hook up the mouse out event to flag
					// that the vibrating should end.
					jNode.mouseout(
						function(){
							// Clear vibration.
							blnVibrate = false;
						}
						);

				}
				);
			// END: each()

			// Return the jQuery stack to keep chaining.
			return( this );
		}



		// Hook up all the vibration elements.
		$(
			function(){
				$( "div" ).vibrate();
			}
			);

	</script>
</head>
<body>

	<h1>
		jQuery Plugin Demo: Vibrate -
		Shake It Like A Polaroid Picture
	</h1>

	<div>
		jQuery - Write Less. Do More.
	</div>

</body>
</html>

I've never done a jQuery plugin that has any sort of timed events; all of my plugins are one-off type features. I have no idea how you would go about doing this properly, so I just took a stab at it. I'd love to see how the Animation features work as those must have really clean timeouts and intervals and all that goodness.

Want to use code from this post? Check out the license.

Reader Comments

42 Comments

And you thought you were getting on search engines for odd keywords before. Just imagine what you'll get now!

"Where's my huge ass vibrator?!?!?"

LOL

15,663 Comments

@Trap,

I'm not sure how "good" it is :) I very rarely used time-events, and certainly, this is the first time I have ever even tried to do that within the context of a jQuery plugin. This was just a stab in the dark.

1 Comments

Nice snippet. I can see a few uses for something like that in menu bars. Have you ever taken a look at Mootools? It has by far the best fx engine of any of the JS frameworks in my oppinion. Using Motools you could probably do something like that with 10% of the code.

1 Comments

Can't think of any practical uses for this - but it's still pretty cool anyway :) Now gonna see if I can understand this code.

1 Comments

Well done, this code has helped me understand jQuery. I get it now, thank you so much, I had struggled for such a long time and now I will be able to use it.

1 Comments

wow nice script i like this .. and love to use this on my website .. can u pls tell how i can make it vibrate automatically without mouse over event.

I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
Ben Nadel