Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Shake Image on Mouse Hover or Vibrate, Rotate Elements

Dec 29, 2012
Introduction
  
Here I will explain how to shake or vibrate or rotate effects for images or elements using jQuery plugin in asp.net.
Description:
  
In previous posts I explained jQuery Highlight gridview rows on mouseover, jQuery Change style of controls, jQuery upload multiple files in asp.net, jQuery Redirect to another page after some time delay and many articles relating to JQuery, asp.net. Now I will explain how to shake or vibrate or rotate images or elements using jQuery plugin in asp.net.

Here we will use jRumble plugin to implement shake or vibrate or rotate effects for images or elements for that we need to write the code like as shown below


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Shake or Vibrate or Rotate Images</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="jquery.jrumble.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#demo2').jrumble({
x: 4,
y: 4,
rotation: 4,
speed: 30,
opacity:10
});
$('#demo2').hover(function() {
$(this).trigger('startRumble');
}, function() {
$(this).trigger('stopRumble');
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="demo2" src="https://lh5.googleusercontent.com/_B28NJpJ61hA/TdgnS7lh7mI/AAAAAAAAAi4/oLTicIRgEIw/FinalLogo.png" />
</div>
</form>
</body>
</html>
If you observe above code in header section I added “jquery.jrumble.js” by using this plugin we can shake or vibrate or rotate the images or required elements you can get those files by downloading attached sample or you can get it from this site jQuery jRumble Plugin and I set some of properties those are

X: Set the horizontal rumble range (pixels)

Y: Set the horizontal rumble range (pixels)

Rotation: Set the rotation range (degrees)

Speed: Set the speed/frequency in milliseconds between rumble movements (lower number = faster)

Opacity: Activate opacity flickering while rumbling

For more details check this site jQuery jRumble Plugin

Demo

Download Sample Attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

7 comments :

Anonymous said...

good

john paul said...

Hi suresh ,
i am etting the following error: please help Microsoft JScript runtime error: 'jQuery' is undefined

Suresh Dasari said...

@john paul,
have u add http://code.jquery.com/jquery-1.8.2.js url to your code or not and check whether you have internet connection or not because we are getting script reference with url.

Anonymous said...

Yes suresh,
error got rectified.

Anonymous said...

thanks bro....

GANESH MAHAJAN said...

Dear Suresh Sir , I want to dock " Facebook Window" like your website can you please provide code .
ganeshmahajan1986@yahoo.com

Unknown said...

I want to shake div when user enter wrong password can you please provide code or guide me.
my email address is shaikhshafique98@gmail.com.
Thank you.

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.