Introduction:
Here I will explain how to shake or vibrate or rotate effects for images or elements using jQuery plugin in asp.net.
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.
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 Email
|
|||
|
|
4 comments :
good
Hi suresh ,
i am etting the following error: please help Microsoft JScript runtime error: 'jQuery' is undefined
@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.
Yes suresh,
error got rectified.